js点击和双击的区别

Question

我试图通过 javascript 区分 click 和 dblclick 事件。我在 dblclick 中尝试了 stopPropagation 但是没有用。因此我使用 setTimeout 编写了自己的函数，试图在调用一个时避免调用另一个。

/* dblclick differ click 
takes two functions as param and one element 
to bind the event listener on
*/
function cdblclick(click, dblclick, el){
  el.cooled = true;
  el.addEventListener('click', function(){
    if(el.cooled){
      setTimeout(function(){
        if(!el.cdblc){el.cdblc = 0}
        el.cdblc++;
        if(el.cdblc === 1){
          setTimeout(function(){
            if(!el.doubled){
              console.log('click')
              // click();
              el.cdblc = 0;
              el.cooled = true;
              el.doubled = false;
            }
          }, 300);
        }else if(el.cdblc === 2){
          console.log('double')
          // dblclick();
          el.doubled = true;
          el.cdblc = 0;
          el.cooled = true;
        }else{
        }
      }, 250);
    }
  });
}

但是，它不能正常工作。如果你能帮我一把，我会很高兴。

感谢将 divide 分为两个元素的建议，但是，我必须在同一个元素上实现两个事件

解决方案

感谢大家的帮助。

/* dblclick differ click 
takes two functions as param and one element 
to bind the event listener on
*/
function cdblclick(click, dblClick, el) {
  let clickedTimes = 0;
  const incrementClick = () => {
    clickedTimes++;
  };
  const reset = () => {
    clickedTimes = 0;
  };
  el.addEventListener('click', e => {
    incrementClick();
    setTimeout(() => {
      if (clickedTimes === 1) {
        click(e);
      } else if (clickedTimes >= 2) {
        dblClick(e);
      }
      reset();
    }, 300);
  });
}

Answer 1

您可以像这样尝试 ondblclick js 监听器：

document.getElementById('click').onclick = function() { console.log("click"); }
document.getElementById('dblclick').ondblclick = function() { console.log("double click"); }

<div>
   <button id="click"> click </button>
   <button id="dblclick"> double click </button>
   
 </div>

Answer 2

您可以尝试通过这种方式来区分 click 和 dbclick：

document.getElementById('click').onclick = function() { 
//do something if click
}
document.getElementById('click').ondblclick = function() { 
//do something if dbclick
}

<div>
   <button id="click"> click or dbclick? </button> 
 </div>

Answer 3

如果你根本不想在双击的情况下执行单击，你可以像你一样使用超时。您只需正确重置计数器和超时。您没有在最后一个空的 else 上重置 el.cdblc。

请注意，这会延迟正常点击。

/* dblclick differ click 
takes two functions as param and one element 
to bind the event listener on
*/
function cdblclick(click, dblclick, el){
  //REM: Storing the values in an object instead of own element properties
  let tObject = {
    Clicks: 0,
    onClick: click,
    onDblClick: dblclick
  };

  //el.cooled = true;
  el.addEventListener('click', function(object){
    object.Clicks += 1;

    //REM: Starting the click..
    if(object.Clicks === 1){
      object.Timeout = window.setTimeout(function(){
        //REM: Execute click if not stopped
        if(typeof object.onClick == 'function'){
          object.onClick()
        };

        //REM: Resetting the click count
        object.Clicks = 0

        /*if(!el.cdblc){el.cdblc = 0}
        el.cdblc++;
        if(el.cdblc === 1){
          setTimeout(function(){
            if(!el.doubled){
              console.log('click')
              // click();
              el.cdblc = 0;
              el.cooled = true;
              el.doubled = false;
            }
        */
      }.bind(this, object), 300)
    }
    //REM: Unless we have triple clicks, there is only double left
    else{
        //REM: Cancel the single click
        window.clearTimeout(object.Timeout);
    
        //REM: Execute double click
        if(typeof object.onDblClick === 'function'){
            object.onDblClick()
          };

        //REM: Resetting the click count
        object.Clicks = 0
        
        /*
          console.log('double')
          // dblclick();
          el.doubled = true;
          el.cdblc = 0;
          el.cooled = true;
       */
    }
  }.bind(el, tObject))
};

document.querySelector('b').onclick = cdblclick(
  function(){console.log('onclick')},
  function(){console.log('ondblclick')},
  document.body
);

<b>Click me</b>

Answer 4

这样就可以了。

function cDblClick(click, dblClick, el) {
  let clickedTimes = 0;
  const incrementClick = () => {
    clickedTimes++;
  };
  const reset = () => {
    clickedTimes = 0;
  };

  el.addEventListener('click', () => {
    incrementClick();

    setTimeout(() => {
      if (clickedTimes === 1) {
        click();
      } else if (clickedTimes === 2) {
        dblClick();
      }

      reset();
    }, 300);
  });
}

Answer 5

这是一个解决方案，其中每个 'click counter' 都是特定于每个元素的，因此元素外部的 onclick 函数不会受到影响...

const singleOrDouble = ({target}) => {
  if (isNaN(target.cn)) {
    target.cn = 1 
  } else {
    target.cn++
  }
  setTimeout(() => {
    if (target.cn == 1) {
     console.log('once')
     target.cn = 0
    }
    if (target.cn > 1) {
      console.log('twice')
      target.cn = 0
    }
  }, 500)  
}

<p onclick="singleOrDouble(event)">Click me</p>

js点击和双击的区别

js differ click and double click

javascript

click

ondblclick

解决方案