JS 中的自定义 link 处理（无后续）

Question

使用 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 秒的情况下继续执行？

Answer 1

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>

Answer 2

您可以使用 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>

JS 中的自定义 link 处理（无后续）

Custom link handling (no following) in JS

javascript

html

mouseevent