关于 title 属性导致触发 mousedown 事件时连带触发 mousemove

简介:

大家都知道,鼠标点击的整个事件的执行流程是:mousedown -> mouseup -> click ,而拖放的整个流程是:mousedown -> mousemove -> mouseup -> click

  可以来看一个正常 demo,可以分别测试点击和拖放动作

  我们试着给 #box 加上title属性再来分别试试点击事件和拖放事件

  可以发现点击也会触发 mousemove 事件,原因就在于 title。

  并且 title 属性有个特性,就是在你鼠标按下的时候,提示文字会隐藏,鼠标抬起则又显示,所以你可以尝试下双击,会发现第 2 次点击会触发 click 事件,因为第 1 次点击后 title 还没有显示出来就进行了第 2 次点击,则正常触发 click 事件。

  发现这一点后,我们就可以试着避免这个小问题,因为在一些情况下,一个对象可能需要同时具备拖放和点击功能,并且保证这两个功能不会冲突。最简单的办法就是避免使用 title 属性,或者你可以参考我在 HoorayOS 里的实现:

  在 mousedown 和 mouseup 时分别记录对象的坐标,并进行对比,如果完全一致则表示对象未进行拖动,否则代表对象已经拖动,这时就可以在 mouseup 里分别处理这两种情况。具体代码可以查看:点击查看

  PS:该问题目前仅在 chrome 下发现有,其他浏览器似乎没有出现。



    本文转自胡尐睿丶博客园博客,原文链接:http://www.cnblogs.com/hooray/archive/2012/11/22/2783349.html,如需转载请自行联系原作者

相关文章
|
消息中间件 存储 负载均衡
拆解一下消息队列、任务队列、任务调度系统
拆解一下消息队列、任务队列、任务调度系统
1272 0
|
10月前
|
机器学习/深度学习 人工智能 自然语言处理
【NeurIPS'24】阿里云 PAI 团队论文被收录为 Spotlight,并完成主题演讲分享
12月10日,NeurIPS 2024在温哥华开幕,阿里云PAI团队论文《PertEval: Unveiling Real Knowledge Capacity of LLMs with Knowledge-Invariant Perturbations》入选Spotlight,PAI团队还进行了“可信AI的技术解读与最佳实践”主题演讲,展示AI工程化平台产品能力。
|
JavaScript 计算机视觉 C++
win10+vs2017+opencv4.5.1+contrib+cuda编译成功,实时人头匹配,手动狗头
这篇文章介绍了如何在Windows 10系统上使用Visual Studio 2017和OpenCV 4.5.1(含contrib模块和CUDA支持)成功编译OpenCV,并解决了编译过程中遇到的问题,如项目文件无效、cmake工具问题、添加Qt和JavaScript支持,并提供了参考链接和cmake配置文件。
257 6
win10+vs2017+opencv4.5.1+contrib+cuda编译成功,实时人头匹配,手动狗头
|
12月前
|
SQL 人工智能 安全
【灵码助力安全1】——利用通义灵码辅助快速代码审计的最佳实践
本文介绍了作者在数据安全比赛中遇到的一个开源框架的代码审计过程。作者使用了多种工具,特别是“通义灵码”,帮助发现了多个高危漏洞,包括路径遍历、文件上传、目录删除、SQL注入和XSS漏洞。文章详细描述了如何利用这些工具进行漏洞定位和验证,并分享了使用“通义灵码”的心得和体验。最后,作者总结了AI在代码审计中的优势和不足,并展望了未来的发展方向。
|
前端开发
react 调用摄像头
react 调用摄像头
233 0
|
人工智能 自然语言处理 文字识别
四川!封面传媒、百词斩等接入通义大模型
四川!封面传媒、百词斩等接入通义大模型
239 2
|
人工智能 监控 算法
智能时代下的AI伦理挑战与应对策略
随着人工智能技术的飞速发展,其在各行各业的应用日益广泛。然而,AI技术带来的便利性背后隐藏着诸多伦理问题,如隐私泄露、算法偏见和责任归属等。本文从技术发展的角度出发,探讨了当前AI技术面临的主要伦理挑战,并提出了相应的应对策略。通过分析不同案例,本文旨在为AI技术的健康发展提供指导性建议,以促进技术创新与社会伦理的和谐共生。
428 0
|
消息中间件 Java Kafka
filebeat+kafka+logstash+elasticsearch+kibana实现日志收集解决方案
filebeat+kafka+logstash+elasticsearch+kibana实现日志收集解决方案
382 0
|
数据采集 数据挖掘 大数据
应对反爬之前先懂什么是网站反爬
什么是网站反爬,应对反爬有哪些解决措施