如何将多个事件处理程序添加到同一个html元素中，并根据事件执行不同的方法

How to add multiple eventhandler to same html element and do exeecute different method according to event?

本文关键字：事件 执行 方法 元素 事件处理 程序 html 同一个 添加      更新时间：2023-09-26

我试图根据事件处理程序在HTML元素上执行不同的函数，例如，如果我单击p标记，它的背景应该变为红色，但如果我双击，应该会发生其他事情。我最初是这样做的，但有很多错误，比如如果我三次单击，那么要通过单击执行的函数就会运行，但双击方法工作得很好。有更好的解决方案吗？

我最初做的事情是这样的：

//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);

在同一个元素上同时使用click和dblclick事件有点棘手，因为要双击，必须单击并再次单击，所以（单次）单击处理程序不会触发任何错误。

如果您真的想同时使用这两种方法，那么单击事件处理程序应该使用setTimeout（几百毫秒），如果dblclick处理程序触发，则应使用clearTimeout。因此，为了检查dblclick，您将稍微延迟click事件处理。你需要决定如何处理三次点击等

但总的来说，我不认为同时使用click和dblclick是web开发中的常见做法。你可能需要考虑一个更好的替代方案。

看看这个教程

通过使用超时，您可以很容易地将它们合并到一个元素中。

<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>
相关文章：