`
TXterran
  • 浏览: 17121 次
  • 性别: Icon_minigender_1
  • 来自: 西安
社区版块
存档分类
最新评论

JS控制document全局级别鼠标事件

阅读更多
   这几天项目赶着code freeze, QA那边又报来一堆前台页面的bug, 在正常人的印象中我们都认为页面的bug都很简单,但是实际上改起来着实是废了极大心思,实践证明前台的bug需要考虑的东西实在太多了,而且还要保证我们的项目兼容IE7/8/9,FireFox, Chrome, Safari, 真的是恶心的不是一点。相关的文章:http://txterran.iteye.com/blog/1837394
   这几天改的datepicker失去焦点的bug就是一典型案例:
   背景介绍: datepicker组件是由一个<ul>标签里的子<li>通过hover事件添加的,而这个<ul>也是由hover展现的,实现这个组件已耗费大量精力,略去不表。
   bug描述: 如果datepicker所在的由<li> hover出来的div如果鼠标移出,则自动将datepicker关闭,但是这个div里的第二个datepicker如果在打开的情况下移出鼠标,它并没有被自动关闭。
   解决方法: 第一印象是挺简单的,无非就是在datepicker所在的div上加一个onmouseout事件罢了,如果鼠标移出了这个div则调它的api将datepicker hide住,实践证明完全不行,因为如果单纯判断div的onmouseout后,直接导致datepicker一旦点击则全部都被关闭了,原因就是datepicker并不是这个div内的元素,光这个问题快研究了一天,试了各种办法,无方最后无奈重写了它的原生hover函数:

<script type="text/javascript">
 $j('.uidatepicker').hover(functions.panelFocusForDatePicker,
       functions.panelBlurForDataPicker);
</script>

这两个函数对象就不列了,里面又是纠结的重新手写了一大堆css加样式。
After testing, 真正恶心的问题才刚刚出现,为什么上面的datepicker可以正常移出div就关闭,而下面的那个不行呢?苦逼的加alert一行行跟code,最后发现是下面那个家伙一旦触发popup出来就必须要鼠标先去hover它才会关闭,本质上原因是datepicker中默认选择的是当前今天,而datepicker在初始化时设置了最大天数就是到今天为止,而源码里肯定有地方做了限制,不能选择最大天,所以导致datepicker一直不能自动关闭(因为它要你重新选择一天才行),这回真没招了,不能让我去改源码吧。
   苦思无果,想了个很巧的办法,我在全局的document级别注册一个mousemove事件,去专门判断最外层的div样式,如果判断到他不存在了,则用js把那两个datepicker关掉:

<script type="text/javascript">
$j(document).mousemove(function(event) {
  var position = $j("#topExpensesForm\\:dateRangeDiv").css("left");
  if(position != '0px'){
     $j('.startDateRange').datepicker('hide');
     $j('.endDateRange').datepicker('hide');
  }
});

哦了,重新test,通过!聊聊几行code,在document级别加一个这个事件终于fix掉了这个lousy的bug,真心值得记录下来。
分享到:
评论

相关推荐

    js常用方法(js常用鼠标事件和其对应的方法)

    在JavaScript中,处理用户交互的常见方式之一是利用鼠标事件。以下是一些JS常用的鼠标事件及其对应的方法: 1. `click`:当用户点击元素时触发。常用于按钮、链接等交互元素。 2. `dblclick`:双击元素时触发,通常...

    jquery监听鼠标滚轮事件+js监听滚轮事件

    本篇将详细介绍如何使用jQuery和原生JavaScript实现鼠标滚轮事件的监听。 一、jQuery监听鼠标滚轮事件 jQuery库提供了一种简洁的方式来处理DOM元素上的事件,包括滚轮事件。要监听滚轮事件,可以使用`$(element)....

    【JavaScript源代码】JavaScript 鼠标事件(MouseEvent)案例讲解.docx

    JavaScript 鼠标事件,即 MouseEvent,是JavaScript中处理与鼠标操作相关事件的关键部分。当用户使用鼠标执行特定操作,如点击、移动、滚动等,浏览器会生成一个MouseEvent对象,这个对象包含了关于鼠标事件的详细...

    关于js中的鼠标事件总结.docx

    JavaScript中的鼠标事件是网页交互中的重要组成部分,它们允许开发者响应用户的鼠标操作,如单击、双击、拖放等。在JavaScript中,有多种鼠标事件,包括`onclick`、`onmousedown`、`onmouseup`、`oncontextmenu`、`...

    JS设置鼠标右键菜单

    在网页开发中,JavaScript(JS)是一种常用的脚本语言,用于增强用户交互和页面动态功能。本文将深入探讨如何利用JavaScript实现自定义鼠标右键菜单的功能。 首先,我们需要理解浏览器的默认行为。当用户在网页上...

    JS实现在线统计一个页面内鼠标点击次数的方法

    为了监听鼠标点击事件,我们可以使用JavaScript的`addEventListener`方法,添加一个针对`document`对象的`click`事件监听器: ```javascript document.addEventListener('click', function() { clickCount++; ...

    完整版检测鼠标离开事件.rar

    在压缩包的“检测鼠标离开事件”文件中,可能包含了一些实例代码,展示了如何结合使用JavaScript和CSS来实现各种复杂的交互效果。这些例子可能包括动态改变元素样式、显示隐藏内容、启动计时器或动画等。 总的来说...

    JS的document_详细介绍及用法

    JavaScript中的`document`对象是浏览器提供的一个全局对象,它代表了当前HTML页面的文档对象,提供了访问和操作页面内容的方法和属性。通过`document`,我们可以实现对HTML元素的查找、创建、修改以及与用户交互等...

    Javascript的document对象

    JavaScript中的`document`对象是浏览器提供的一个全局对象,它代表了当前HTML文档,并提供了与文档交互的各种方法和属性。在JavaScript编程中,我们经常使用`document`对象来操作页面元素、获取用户输入、处理事件等...

    js控制图片放大、缩小、按比例显示

    在JavaScript(JS)编程中,控制图片的放大、缩小以及按照比例显示是常见的需求,尤其在网页设计和交互效果中。下面将详细讲解如何利用JavaScript实现这些功能。 1. **图片放大与缩小** - **鼠标滚动事件**:在...

    js监听鼠标点击和键盘点击事件并自动跳转页面

    在JavaScript编程中,事件处理是实现用户交互的关键技术。...通过这样的工具,你可以轻松查阅不同类型的事件,比如鼠标事件、键盘事件、表单事件等,以及它们的详细行为和使用方法,从而提升你的JavaScript编程能力。

    js和CSS3自定义鼠标特效

    接下来,JavaScript(这里使用了jQuery库)的作用是控制鼠标的动画和行为。jQuery简化了DOM操作和事件处理,使我们能轻松地响应鼠标移动、点击等事件,更新CSS样式来实现动画效果。例如,当鼠标移动时,可以改变...

    javascript经典特效---全面屏蔽鼠标键盘2.rar

    要屏蔽鼠标,我们可以在全局范围内阻止所有鼠标事件。以下是一个简单的例子: ```javascript document.addEventListener('mousedown', preventMouse, false); document.addEventListener('mouseup', preventMouse, ...

    JAVASCRIPT-DOCUMENT方法大全.pdf

    JavaScript中的`document`对象是浏览器提供的全局对象,用于访问和操作HTML文档的各个部分。它包含了大量的属性和方法,使得JavaScript能够与网页内容进行交互。以下是对`document`对象主要属性和方法的详细说明: ...

    javascript事件详解

    此外,还有一些与鼠标事件相关的属性,如鼠标按键状态、鼠标滚轮等。在处理跨浏览器事件时,需要注意IE和其他浏览器之间的差异,以确保代码兼容性。 总的来说,JavaScript事件是构建动态网页的关键工具,理解并掌握...

    javascript 鼠标拖动图片

    首先,我们需要为图片元素添加鼠标事件监听器。当用户按下鼠标时,我们需要记录下鼠标的初始位置和图片的当前位置。这可以通过`mousedown`事件来实现,获取鼠标坐标和图片的CSS位置信息。例如: ```javascript ...

    vue 解除鼠标的监听事件的方法

    总结起来,Vue.js中的自定义指令机制为我们提供了极大的灵活性,可以方便地实现诸如鼠标监听事件解除等功能。在这个案例中,通过自定义`v-click-outside`指令,我们能够在切换页面时有效地管理鼠标点击事件,提高...

    HTML+js实现鼠标绘制可拖动矩形.pdf

    整个过程的关键在于理解鼠标事件的坐标系统以及如何利用这些坐标来动态改变元素的位置和尺寸。通过监听鼠标按下和移动事件,我们可以实时响应用户的输入,实现对矩形的绘制和拖动。这种方法在开发交互式网页应用时...

    javascript事件模型

    事件流是JavaScript事件模型的核心部分,描述了事件如何在DOM(Document Object Model)层次结构中传递。主要有两种事件流模型:冒泡型和捕获型。冒泡型事件从最具体的节点(例如,文档中的一个元素)开始,然后逐级...

Global site tag (gtag.js) - Google Analytics