【(O)阻止默认事件和阻止冒泡的应用场景】的更多相关文章

DOM2级事件对象、添加事件、阻止默认事件、阻止冒泡事件、获取事件对象目标的兼容处理

事件对象——兼容处理 /* * 功能: 事件对象兼容 * 参数: 表示常规浏览器的事件对象e */ function getEvent(e) { // 如果存在e存在,直接返回,否则返回window.event 7 return e || window.event; 8 } 获取事件所对应的目标——兼容处理 /* * 功能: 获取事件所对应的目标 * 参数: 表示常规浏览器的事件对象e */ function getTargetByEvent(e) { // 如果存在e.target,直接返回,…

(O)阻止默认事件和阻止冒泡的应用场景

场景1:阻止默认事件   比如这样的一个需求 点击取消a标签按钮的时候会触发一些js动作,但是不能让这个a标签产生跳转行为, 所以需要在点击取消的时候 阻止冒泡,防止其跳转. <a id='cancelBtn' href="https://www.baidu.com">取消按钮</a> <script> document.getElementById("cancelBtn").addEventListener("clic…

javascript的阻止默认事件和阻止冒泡事件

这两个方面的知识,在妙味课堂中有听过,再次复习一下: 原文来自:[http://www.cnblogs.com/Essence/p/4266618.html] 事件冒泡与默认行为   在说事件冒泡之前,我们先说说事件对象(Event) Event 在触发DOM上某个事件时,会产生一个事件对象event,这个对象包含着所有事件有关的信息(导致事件的元素.事件的类型.与特定事件相关的信息) 所有浏览器都支持Event对象,但支持方式不同 IE中的事件对象:window.event /* 封装Even…

s事件之event.preventDefault()与event.stopPropagation()的阻止默认事件和阻止事件冒泡的用法

event.preventDefault()用法介绍 该方法将通知 Web 浏览器不要执行与事件关联的默认动作(如果存在这样的动作).例如,如果 type 属性是 "submit",在事件传播的任意阶段可以调用任意的事件句柄,通过调用该方法,可以阻止提交表单.注意,如果 Event 对象的 cancelable 属性是 fasle,那么就没有默认动作,或者不能阻止默认动作.无论哪种情况,调用该方法都没有作用. 该方法将通知 Web 浏览器不要执行与事件关联的默认动作(如果存在这样的动作…

在javascript中的浏览器兼容问题以及兼容浏览器汇总（默认事件，阻止冒泡，事件监听。。。）以及解决方式详解

在javascript中常见的浏览器兼容问题,以及解决方式. 在前端工作当中我们遵循这样的原则:渐进增强和优雅降级   渐进增强(progressive enhancement): 针对低版本浏览器进行构建页面,保证最基本的功能,然后再针对高级浏览器进行效果.交互等改进和追加功能达到更好的用户体验   优雅降级(graceful degradation): 一开始就构建完整的功能,然后再针对低版本浏览器进行兼容.     1.获取非行内样式:         函数getStyle(e,attr)…

JavaScript事件：事件处理模型(冒泡、捕获)、取消冒泡、阻止默认事件

(一)事件处理模型---事件冒泡.捕获 (1)事件冒泡 24 <body> 25 <div class="warpper"> 26 <div class="content"> 27 <div class="box"> 28 29 </div> 30 </div> 31 </div> 32 <script type="text/javascript&…

阻止事件冒泡，阻止默认事件，event.stopPropagation()和event.preventDefault()，return fal的区别

今天来看看前端的冒泡和事件默认事件如何处理 1.event.stopPropagation()方法 这是阻止事件的冒泡方法,不让事件向documen上蔓延,但是默认事件任然会执行,当你掉用这个方法的时候,如果点击一个连接,这个连接仍然会被打开, 2.event.preventDefault()方法 这是阻止默认事件的方法,调用此方法是,连接不会被打开,但是会发生冒泡,冒泡会传递到上一层的父元素: 3.return false  : 这个方法比较暴力,他会同事阻止事件冒泡也会阻止默认事件:写上此代…

js之阻止事件冒泡(待修改)和阻止默认事件

阻止默认事件(event.stopPropagation()): <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> &…

javascript 阻止事件冒泡和阻止默认事件对比

公司项目有像上图中效果的功能需求这也是很常见功能很简单功能,通过一个小例子和大家聊聊js的事件冒泡和默认事件. 先说说一般的实现方式即使用阻止事件冒泡的方式去做,给input绑定一个click事件(并阻止事件冒泡到window)当点击上input的时候就显示ul再给window或者document 绑定一个click事件当点击页面其他地方的时候隐藏ul. 这里还要给ul 添加一个代理点击事件(事件代理比遍历li绑定点击事件性能要高)当点击到下面的li的时候把li里面的内容添加到input里面 并…

JS 之 阻止事件冒泡，阻止默认事件，event.stopPropagation()和event.preventDefault()，return false的区别

在前端开发中,有时我们需要阻止冒泡和阻止默认事件的发生. 一.event.stopPropagation() 阻止事件的冒泡,不让事件向documen上蔓延,但是默认事件任然会执行,当调用这个方法的时候,如果点击一个连接,这个连接仍然会被打开. 二.event.preventDefault() 阻止默认事件的方法,调用此方法时,连接不会被打开,但是会发生冒泡,冒泡会传递到上一层的父元素: 三.return false: 这个方法比较暴力,会同时阻止事件冒泡也会阻止默认事件:写上此代码,连接不会被…