`
TXterran
  • 浏览: 16935 次
  • 性别: 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,真心值得记录下来。
分享到:
评论

相关推荐

    javascript实现在某个元素上阻止鼠标右键事件的方法和实例

    通常我们使用阻止右键事件是在全局阻止,即在document层面就将右键拦截,现在我想要实现的效果是只在特定的区域阻止默认的右键事件,而其他区域并不影响。 通过实验我发现要是在IE下绑定的方法中return fals

    echarts.min.js

    emphasis: { // 鼠标 hover 高亮时图形和标签的样式 (当鼠标放上去时 label和itemStyle 的样式) label: { // label高亮时的配置 show: true, textStyle: { color: '#fff', // 高亮时标签颜色变为 白色 ...

    ymprompt消息提示组件4.0【js插件弹出框美化版】

    如:&lt;script type="text/javascript" src="ymPrompt.js"&gt;&lt;/script&gt; 2、在页面中引入对应的皮肤文件的CSS,如: 3、自定义组件的默认配置信息(此步骤可选,该方法可以在任意时间调用) 页面的js中通过ymPrompt....

    Javascript在IE或Firefox下获取鼠标位置的代码

    第一段代码是利用全局变量来获取实时鼠标的位置。 代码如下: var xPos; var yPos; [removed](function(evt){ evt=evt || window.event; if(evt.pageX){ xPos=evt.pageX; yPos=evt.pageY; } else { xPos=evt.clientX+...

    原生js拖拽(第一课 未兼容)拖拽思路

    1、第一步点击需要拖动的元素 2、在点击下的元素被选中,进行move移动 3、当鼠标弹起的时候,停止动作 4、点击元素oDIV的时候,可用的是oDIV区域,而move和up则是全局区域,也就是整个文档通用,即应该用document *...

    《javaScrip开发技术大全》源代码

    • sample18.htm 通过事件调用JavaScript代码 • sample19.htm 一段错误的JavaScript代码(调试用) 第3章(\代码\第03章) • sample01.htm 转换成数字型 第4章(\代码\第04章) • ...

    ASP.NET常用代码

    &lt;script language="javascript" for="document" event="onkeydown"&gt; if(event.keyCode==13 && event.srcElement.type!='button' && event.srcElement.type!='submit' && event.srcElement.type!='reset' && event....

    ExtAspNet v2.2.1 (2009-4-1) 值得一看

    -如何自定义Javascript脚本和C#处理函数来响应键盘事件。 -为Tree增加AutoLeafIdentification属性。 -增加示例(tree_auto_leaf_identification.aspx)(feedback:wdrabbit)。 +2009-11-17 v2.1.4 -修正...

    ExtAspNet_v2.3.2_dll

    -如何自定义Javascript脚本和C#处理函数来响应键盘事件。 -为Tree增加AutoLeafIdentification属性。 -增加示例(tree_auto_leaf_identification.aspx)(feedback:wdrabbit)。 +2009-11-17 v2.1.4 -修正...

    ASP.NET程序中常用的三十三种代码.txt

    &lt;script language="javascript" for="document" event="onkeydown"&gt;  if (event.keyCode==13 && event.srcElement.type!=’button’ && event.srcElement.type! =’submit’ && event.srcElement.type!=’reset’ &...

Global site tag (gtag.js) - Google Analytics