Question

我正在尝试根据事件处理程序对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);

Answer 1

看看这个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>

Answer 2

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

如果你真的想要同时使用它们，那么对于click事件处理程序你应该setTimeout（几百毫秒），如果dblclick处理程序触发，你应该clearTimeout。因此，您将延迟点击事件处理一点，以检查dblclick。您需要决定如何处理三次点击等。

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

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

2 个答案: