Question

我想对html svg中的mouseDown，单击和双击事件使用不同的处理程序。现在，当我单击svg时，将触发mouseDown和click处理程序，同样，当双击时，将触发click和双击处理程序。有办法解决这个问题吗？谢谢

更新：我想在svg形状上使用这些处理程序，特别是使用mouseDown / Up进行拖放，单击更改形状并双击以删除形状。

Answer 1

双击（显然）包括两次单击。进行第一次单击时，没人会知道是否会有第二次单击。这就是双击的第一次单击会产生“单击事件”的原因。因此，无法解决此问题。

推荐的解决方案是不要在同一控件上同时使用（单击和双击）事件。

Answer 2

dblclick事件在两次单击事件以及两对mousedown和mouseup事件之后触发。

通常，我们会遇到这种情况，例如通过单击选择/聚焦文件，然后通过双击执行文件。多次选择同一文件没有害处。

如果您需要区分这两个事件，可以推迟单击处理，直到确定它不是双击的一部分，但这会增加处理的延迟。

let clicks = 0;
let clickTimer = 0;
const dblClickTimeSpan = 300;

const clickHandler = (e) => {
    clicks++;
    if(clicks === 1) {
    clickTimer = setTimeout(()=>{
        clicks = 0;
        // handle single click, now we are sure it is not a bouble click
        console.log('Single Click.')
    }, dblClickTimeSpan);
    }
    if(clicks === 2) {
        // it is the second click in double-click event
        clearTimeout(clickTimer);
        clicks = 0;
    }
}

myButton.addEventListener('click', clickHandler);
myButton.addEventListener('dblclick', (e) => console.log('Double Click.'));

<button id="myButton">Button</button>

Answer 3

您可以创建单击方法，并在发生单击事件或双击事件时使用超时区分。并将超时设置为1或2秒。

Answer 4

您可以使用event.detail来检测简单或双击（也可能是三次单击）

function fClicksd( elmId, fctSimpleClick, fctDoubleClick )
  {
  const clickDelay = 600 // a large one...  
    ,   clickElm   = document.getElementById(elmId)
  let  timOutRef   = setTimeout(() => { }, 0)

  clickElm.onclick=e=>
    {
    switch (e.detail) {
      case 1:
        clearTimeout(timOutRef)
        timOutRef = setTimeout( fctSimpleClick , clickDelay, e)        
        break;
      case 2:
        clearTimeout(timOutRef)
        fctDoubleClick(e)        
        break;
      }
    }
  }


var cpt= 0

function f_onSVGsimpleClick()  { console.log( ' SVG simple click', cpt++ ) }
function f_onSVGdoubleClick()  { console.log( ' SVG double click', cpt++ ) }
function f_onParagrphSimpleClick(e)
  {
  if (!e.target.matches('span')) return
  console.log( e.target.textContent + ' simple click', cpt++ )
  }
function f_onParagrphDoubleClick(e)
  {
  if (!e.target.matches('span')) return
  console.log( e.target.textContent + ' double click', cpt++ )
  }

fClicksd( 'my-rect', f_onSVGsimpleClick, f_onSVGdoubleClick  )
fClicksd( 'my-paragraph', f_onParagrphSimpleClick, f_onParagrphDoubleClick  )

#my-paragraph, rect { cursor: pointer;}
#my-paragraph span:hover { background-color:yellow }

<p id="my-paragraph">
  <span>Paul</span>
  <span>John</span>
</p>

<svg width="150" height="100" viewBox="0 0 3 2">
  <rect id="my-rect" width="1" height="2" x="2" fill="#d2232c" />
</svg>

Javascript如何区分mouseDown，click和doubleClick事件

4 个答案: