0

我正在尝试通过 javascript来区分click和事件。dblclick我试过stopPropagation但dblclick没有奏效。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);
    }
  });
}

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

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

解决方案

感谢所有的帮助。

/* 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);
  });
}
4

5 回答 5

1

像这样会起作用。

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);
  });
}
于 2021-07-13T09:25:17.590 回答
1

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

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

/* 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>

于 2021-07-13T09:19:27.400 回答
1

这是一个解决方案，其中每个“点击计数器”都特定于每个元素，因此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>

于 2021-07-13T09:53:08.440 回答
0

您可以像这样尝试 ondblclick js listner：

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>

于 2021-07-13T09:04:32.937 回答
0

您可以尝试这种方式来区分 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>

于 2021-07-13T09:14:15.547 回答