JavaScript中click与dblclick冲突与共存

最新推荐文章于 2024-07-20 17:05:30 发布

FuDesign2008

最新推荐文章于 2024-07-20 17:05:30 发布

阅读量1.5w

点赞数 1

分类专栏： javascript html 文章标签： javascript 前端开发 click dblclick 双击

本文链接：https://blog.csdn.net/FuDesign2008/article/details/18735587

版权

javascript 同时被 2 个专栏收录

125 篇文章 0 订阅

订阅专栏

html

15 篇文章 0 订阅

订阅专栏

在前端开发中, 如果监听了DOM元素的click事件, 且监听了dblclick事件, 会导致某些冲突.

冲突

如实现以下功能

单击input按钮, 设置box元素颜色为绿色.
双击input按钮, 设置box元素颜色为红色.

以下是示例代码:

<!DOCTYPE html>
<html>
<head>
    <title>click and dblclick test</title>
    <meta charset="utf-8" />
</head>
<body>
    <h1>click and dblclick test</h1>
    <div><input type="button" value="double click here"></div>
    <div id="box">color will be changed</div>
    <script>
        var input = document.querySelector('input'),
            box = document.querySelector('#box'),
            /**
             * @param {String} color
             */
            setBoxColor = function (color) {
                console.log('setBoxColor: ' + color);
                box.style.color = color;
            };
        input.addEventListener('click', function () {
            console.log('click ' + (new Date()).getTime());
            setBoxColor('green');
        }, false);

        input.addEventListener('dblclick', function () {
            console.log('dblclick ' + (new Date()).getTime());
            setBoxColor('red');
        }, false);
    </script>
</body>
</html>

在Chrome上运行以上代码并双击input按钮, console会显示类似如下的结果:

click 1390545338752             click-and-dblclick-js-test.html:22
setBoxColor: green              click-and-dblclick-js-test.html:18
click 1390545338895             click-and-dblclick-js-test.html:22
setBoxColor: green              click-and-dblclick-js-test.html:18
dblclick 1390545338896          click-and-dblclick-js-test.html:27
setBoxColor: red                click-and-dblclick-js-test.html:18

可以发现:

一次双击操作, 触发了两次click事件和一次dblclick事件.
第二次click和dblclick事件触发几乎在同一时刻, dblclick事件距第一次click事件触发时间差144 ms
在双击操作中, 连续触发的两次click事件, 执行了两次并不希望执行的click事件监听器.

解决

导致双击操作中, 连续执行两次并不希望执行的click事件监听器的根本原因是:

双击操作依赖两次单击操作

没有办法改变浏览器触发单/双击事件的机制, 但有办法避免在双击过程中执行两次并不希望执行的click事件监听器吗?

以下是解决办法:

<!DOCTYPE html>
<html>
<head>
    <title>click and dblclick fix</title>
    <meta charset="utf-8" />
</head>
<body>
    <h1>click and dblclick fix</h1>
    <div><input type="button" value="double click here"></div>
    <div id="box">color will be changed</div>
    <script>
        var input = document.querySelector('input'),
            box = document.querySelector('#box'),
            /**
             * @param {String} color
             */
            setBoxColor = function (color) {
                console.log('setBoxColor: ' + color);
                box.style.color = color;
            },
            clickTimeout = {
                _timeout: null,
                /**
                 *
                 */
                set: function (fn) {
                    var that = this;
                    that.clear();
                    that._timeout = window.setTimeout(fn, 300);
                },
                clear: function () {
                    var that = this;
                    if (that._timeout) {
                        window.clearTimeout(that._timeout);
                    }
                }
            };
        input.addEventListener('click', function () {
            console.log('click ' + (new Date()).getTime());
            clickTimeout.set(function () {
                setBoxColor('green');
            });
        }, false);

        input.addEventListener('dblclick', function () {
            clickTimeout.clear();
            console.log('dblclick ' + (new Date()).getTime());
            setBoxColor('red');
        }, false);
    </script>
</body>
</html>

运行并双击input按钮:

click 1390547289426         click-and-dblclick-js-fix.html:39
click 1390547289552         click-and-dblclick-js-fix.html:39
dblclick 1390547289553      click-and-dblclick-js-fix.html:47
setBoxColor: red            click-and-dblclick-js-fix.html:18

在双击过程中, click事件监听器依然会被连续执行两次, 但setBoxColor函数不会被 click事件监听器调用了.

缺点

以上解决方案的缺点是:

单击操作下的setBoxColor的执行开始时间比正常情况要慢300 ms

FuDesign2008

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
1
评论
JavaScript中click与dblclick冲突与共存

在前端开发中, 如果监听了DOM元素的click事件, 且监听了dblclick事件, 会导致某些冲突.冲突如实现以下功能单击input按钮, 设置box元素颜色为绿色.双击input按钮, 设置box元素颜色为红色.以下是示例代码: click and dblclick test click and dblclick test
复制链接

扫一扫

专栏目录