如何将多个eventhandler添加到相同的html元素并根据事件执行不同的方法？

我想根据事件处理程序在HTML元素上执行不同的功能，例如，如果我点击p标签，它的背景应该变成红色，但如果我双击其他的东西应该发生。我最初做过，但有很多错误，比如如果我点击三次，然后单击即可执行该功能。但双击方法工作正常。有没有更好的解决方案来解决它？如何将多个eventhandler添加到相同的html元素并根据事件执行不同的方法？

我最初做的是这样的：

//Event 1 

var p = document.getElementById("textNode"); 


p.addEventListener('dblclick', function init() { 
    //some code 
}, false); 

// Event 2 

var element = document.getElementById("textNode"); 

element.addEventListener('click', elemEventHandler, true);

来源

2012-01-24 monk

看一看这个tutorial

您可以轻松地通过使用超时它们合并到一个单一的元素。

<script> 

    var click = 0; 
    var t = undefined; 

    function doclick (click) 
    { 
     if (click == 1) 
     { 
      console.log('click'); 
      $('#textNode').slideUp(); 
     } 
     else if (click == 2) 
     { 
      console.log('dblclick'); 
      $('#textNode').fadeOut(); 
     } 
     clearTimeout(t); 
     delete window.t; 
    } 

    $(document).ready(function() 
    { 

     $('#textNode').click(function() 
     { 
      clearTimeout(t); 
      delete window.t; 
      t = setTimeout('doclick(1);', 500); 
     }); 

     $('#textNode').dblclick(function() 
     { 
      clearTimeout(t); 
      delete window.t; 
      t = setTimeout('doclick(2);', 400); 
     }); 


    }); 

</script> 

<body> 
    <p id="textNode">TEST</p> 
</body>

来源

2012-01-24 08:18:16

同一元素上同时使用click和dblclick事件是有点棘手，因为为了双击你必须点击并再次点击，所以它是没有错误的是（单）点击处理火灾。

如果您确实想要同时使用，则应该为点击事件处理程序使用setTimeout（几百毫秒），如果dblclick处理程序触发，则应使用clearTimeout。所以你会延迟点击事件处理一点点以检查dblclick。您需要决定如何处理三重点击等。

但总的来说，我不认为在web dev中同时使用click和dblclick是很常见的做法。你可能想考虑一个更好的选择。

来源

2012-01-24 08:27:48 ori

如何将多个eventhandler添加到相同的html元素并根据事件执行不同的方法？

回答

相关问题