JS 中的自定义 link 处理(无后续)
Custom link handling (no following) in JS
使用 JavaScript
,我就是这么做的。单击 link 时,如果按住鼠标按钮超过 2 秒,除了跟随 link,它还会将相关文本复制到剪贴板。
这是HTML:
<a onmousedown='startChrono();' onmouseup='checkChrono(this.id);'
id='SomeID' href='http://SomeUrl.org' %>'>Some meaningful text</a>
这是两个函数,其中 referDate 是全局定义的:
function startChrono() {
referDate = new Date().getTime();
}
function checkChrono(objId) {
let currentDate = new Date().getTime();
if ((currentDate - referDate) > 2000) {
copyStr(objId);
}
}
copyStr() 的代码与问题无关,我不包含它。
这是我需要帮助的地方。
我应该在上面的代码中更改什么,以防止 link 在按下按钮超过 2 秒的情况下继续执行?
let referDate;
function copyStr(obj){
console.log(`2+ sec, str of "${obj.id}" with content "${obj.innerHTML}" copied! ( actually not :P )`)
}
function startChrono() {
referDate = new Date().getTime();
}
function checkChrono(obj,ev) {/*no need for id, we can use object itself!*/
let currentDate = new Date().getTime()
if ((currentDate - referDate) > 2000) {
ev.preventDefault()
copyStr(obj)
}
}
<a id="a-id" onmousedown="startChrono();" onclick="checkChrono(this,event);" href="/"> click </a>
您可以使用 preventDefault 被 onclick 调用而不是 mousedown。
var referDate;
function startChrono() {
referDate = new Date().getTime();
}
function checkChrono(event, objId) {
let currentDate = new Date().getTime();
if ((currentDate - referDate) > 2000) {
event.preventDefault(); // cancels the click event
//copyStr(objId);
document.getElementById("text").innerHTML = "Text Copied";
}
else{
document.getElementById("text").innerHTML = "Follows the link";
}
}
<a onmousedown='startChrono();'
onclick='checkChrono(event, this.id);'
id='SomeID' target="_blank"
href='https://google.com'>Some meaningful text</a>
<div id="text"></div>
使用 JavaScript
,我就是这么做的。单击 link 时,如果按住鼠标按钮超过 2 秒,除了跟随 link,它还会将相关文本复制到剪贴板。
这是HTML:
<a onmousedown='startChrono();' onmouseup='checkChrono(this.id);'
id='SomeID' href='http://SomeUrl.org' %>'>Some meaningful text</a>
这是两个函数,其中 referDate 是全局定义的:
function startChrono() {
referDate = new Date().getTime();
}
function checkChrono(objId) {
let currentDate = new Date().getTime();
if ((currentDate - referDate) > 2000) {
copyStr(objId);
}
}
copyStr() 的代码与问题无关,我不包含它。
这是我需要帮助的地方。 我应该在上面的代码中更改什么,以防止 link 在按下按钮超过 2 秒的情况下继续执行?
let referDate;
function copyStr(obj){
console.log(`2+ sec, str of "${obj.id}" with content "${obj.innerHTML}" copied! ( actually not :P )`)
}
function startChrono() {
referDate = new Date().getTime();
}
function checkChrono(obj,ev) {/*no need for id, we can use object itself!*/
let currentDate = new Date().getTime()
if ((currentDate - referDate) > 2000) {
ev.preventDefault()
copyStr(obj)
}
}
<a id="a-id" onmousedown="startChrono();" onclick="checkChrono(this,event);" href="/"> click </a>
您可以使用 preventDefault 被 onclick 调用而不是 mousedown。
var referDate;
function startChrono() {
referDate = new Date().getTime();
}
function checkChrono(event, objId) {
let currentDate = new Date().getTime();
if ((currentDate - referDate) > 2000) {
event.preventDefault(); // cancels the click event
//copyStr(objId);
document.getElementById("text").innerHTML = "Text Copied";
}
else{
document.getElementById("text").innerHTML = "Follows the link";
}
}
<a onmousedown='startChrono();'
onclick='checkChrono(event, this.id);'
id='SomeID' target="_blank"
href='https://google.com'>Some meaningful text</a>
<div id="text"></div>