解决问题：页面中存在两个冲突事件，如何处理

2021-02-27 11:03:35 阅读：167 来源： 互联网

标签：焦点 button onmousedown 点击事件 input 页面解决问题冲突

详细描述一下问题，有两个事件，一个是input丢失焦点事件A，一个是button的点击事件B，当input获取到焦点时，再去点击button，这样会直接触发A事件，无法触发B事件。

网上搜了好多，经过一一鉴别，貌似都不管用，不知道是不是我测试的姿势不对。

最终将button的点击事件改为了鼠标点下的事件，也就是onmousedown事件，最终解决了。

因为啥呢，主要是onclick = onm ousedown + onm ouseup ，也就是说我直接在鼠标起来之前就把事件提前触发了，应该就跑在了失去焦点事件前边，所以就会先执行onmousedown的事件，然后再执行input的失去焦点事件。

具体代码如下：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>测试双事件冲突</title>
    </head>
    <body>
        <div>
            <button onblur="loseMe()">不要离开我</button>
            <button onm ousedown="clickMe()">快点点我</button>
        </div>
        <script>
            function loseMe(){
                alert("不要离开我")
            }
            function clickMe(){
                alert("点了我一下")
            }
            
        </script>
    </body>
</html>

效果图：

标签：焦点,button,onmousedown,点击,事件,input,页面,解决问题,冲突
来源： https://www.cnblogs.com/qcq0703/p/14455020.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

解决问题：页面中存在两个冲突事件，如何处理