javascript代码实例教程-js框架开发之旅--事件三

发布时间:2019-02-20 发布网站:脚本宝典
脚本宝典收集整理的这篇文章主要介绍了javascript代码实例教程-js框架开发之旅--事件三脚本宝典觉得挺不错的,现在分享给大家,也给大家做个参考。
小宝典致力于为广大程序猿(媛)提供高品质的代码服务,请大家多多光顾小站,小宝典在此谢过。 停止事件

我们点击一个元素,会触发它的默认事件,同时事件还会传播给他的父元素。

PRototyPE使用Event.stop()方法阻止默认事件和事件的传播。

jQuery遵循W3C的标准,给事件提供了更多的接口:

    event.preventDefault():阻止事件目标的默认事件触发。

    event.stopPropagation(): 阻止事件在DOM树上传播。

    event.stopImmediatePropagation(): 阻止当前元素的后续事件触发,同时阻止事件在DOM树上传播。

 

我们的接口设计

我们打算给事件对象继承下面的方法:

    event.stop() – 阻止默认事件和事件传播

    event.preventDefault() – 阻止默认事件

    event.stopPropagation() – 阻止事件传播

 

 

实现

我创建了一个私有的函数继承和修复事件对象,主要是修复IE的差异:

[javascript]  

function stop(event) {  

  event.preventDefault(event);  

  event.stopPropagation(event);  

}  

  

function fix(event, element) {  

  if (!event) VAR event = window.event;  

  

  event.stop = function() { stop(event); };  

  

  if (typeof event.target === 'undefined')  

    event.target = event.srcElement || element;  

  

  if (!event.preventDefault)  

    event.preventDefault = function() { event.returnValue = false; };  

  

  if (!event.stopPropagation)  

    event.stopPropagation = function() { event.cancelBubble = true; };  

  

  return event;  

}  

 

其他浏览器差异

其他的浏览器差异主要体现在键盘和鼠标事件上,jquery处理了下面的一些差异:

Safari对文本节点处理的不同

某些浏览器对pageX/Y的不支持

键盘事件对event.which和event.metaKey的支持不同

event.which对鼠标点击的按钮的序列的支持

Prototype处理方式类似:

[javascript] 

var _isButton;  

if (Prototype.browser.IE) {  

  // IE doesn't map left/right/middle the same way.  

  var buttonMap = { 0: 1, 1: 4, 2: 2 };  

  _isButton = function(event, code) {  

    return event.button === buttonMap[code];  

  };  

} else if (Prototype.Browser.webkit) {  

  // In Safari we have to account for when the user holds down  

  // the ";meta" key.  

  _isButton = function(event, code) {  

    swITch (code) {  

      case 0: return event.which == 1 && !event.metaKey;  

      case 1: return event.which == 1 && event.metaKey;  

      default: return false;  

    }  

  };  

} else {  

  _isButton = function(event, code) {  

    return event.which ? (event.which === code + 1) : (event.button === code);  

  };  

}  

 

结论

最近三篇文章我们介绍了事件的处理,我们阐述了如果开发一个兼容W3C和微软的事件框架。我们了解了事件的生命周期,学习了怎么阻止事件的默认事件和事件的传播。我们同样了解其他浏览器的差异和如何处理这些差异。

觉得可用,就经常来吧! 脚本宝典 欢迎评论哦! js脚本,巧夺天工,精雕玉琢。小宝典献丑了!

脚本宝典总结

以上是脚本宝典为你收集整理的javascript代码实例教程-js框架开发之旅--事件三全部内容,希望文章能够帮你解决javascript代码实例教程-js框架开发之旅--事件三所遇到的问题。

如果觉得脚本宝典网站内容还不错,欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。