JavaScript阻止冒泡和取消事件默认行为

//功能:停止事件冒泡 function stopBubble(e) { if ( e && e.stopPropagation ) { e.stopPropagation(); } else { // ie old window.event.cancelBubble = true; } } //功能:阻止事件默认行为 function stopDefault( e ) { if ( e && e.preventDefault ) { e.preventDefault();…

JavaScript停止事件冒泡和取消事件默认行为

功能:停止事件冒泡 function stopBubble(e) { // 如果提供了事件对象,则这是一个非IE浏览器 if ( e && e.stopPropagation ) { // 因此它支持W3C的stopPropagation()方法 e.stopPropagation(); } else { // 否则,我们需要使用IE的方式来取消事件冒泡 window.event.cancelBubble = true; } } 功能:阻止事件默认行为 function stopDefa…

JS 传播事件、取消事件默认行为、阻止事件传播

1.事件处理程序的返回值通常情况下,返回值false就是告诉浏览器不要执行这个事件相关的默认操作.例如,表单提交按钮的onclick事件处理程序能通过返回false阻止浏览器提交表单,再如a标签的onclick事件处理程序通过返回false阻止跳转href页面.类似地,如果用户输入不合适的字符,输入域上的onkeypress事件处理程序能通过返回false来过滤键盘输入. 事件处理程序的返回值只对通过属性注册的处理程序才有意义. 2.调用顺序文档元素或其他对象可以为指定事件类型注册多个事件…

在FireFox浏览器上，用stopImmediatePropagation阻止冒泡鼠标滚动事件

楔子是不是在火狐用stopPropagation不太满意很久没有笑过又不知为何既然不快乐又不喜欢这里不如一路向西用stopImmediatePropagation(其实我对浏览器的兼容性看不顺眼已经很久了,殊不知浏览器对我的想法更不顺眼,甚至嗤之以鼻) 注释言归正传,让我解释一下stopImmediatePropagation的用法:如果多个监听器连接到同一事件类型的同一元素,则按添加监听器的顺序调用它们.如果在一个这样的调用中调用了event. stopimmediatePropag…

javascript的自定义对象/取消事件/事件兼容性/取消冒泡

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>自定义对象</title>  <script type="text/javascript"> function method1() { var person=new Object();…

javascript 阻止冒泡

JS 阻止冒泡 function stopBubble(e) { //如果提供了事件对象,则这是一个非IE浏览器 if(e && e.stopPropagation) { //因此它支持W3C的stopPropagation()方法 e.stopPropagation(); } else { //否则,我们需要使用IE的方式来取消事件冒泡 window.event.cancelBubble = true; } return false; }…

JS阻止冒泡和取消默认事件(默认行为)

本文链接:http://caibaojian.com/javascript-stoppropagation-preventdefault.html 阻止事件冒泡 function(e){ if( e && e.stopPropation ) e.stopPropagation(); else window.event.cancelBubble = true; } 阻止默认行为 //阻止浏览器的默认行为 function stopDefault( e ) { //阻止默认浏览器动作(W3C…

JavaScript阻止冒泡事件

事件兼容 event = event ? event : window.event; js停止冒泡· window.event? window.event.cancelBubble = true : event.stopPropagation(); js阻止默认行为 window.event? window.event.returnValue = false : event.preventDefault();…

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

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

jQuery 取消事件冒泡阻止后续内容执行闭包函数 (学习笔记)

1.取消事件冒泡 <title>取消事件冒泡</title> <style> div { border:solid 1px black; } </style> <script src="js/jquery-3.1.1.js"></script> <script> $(function () { $("#big").click(function () { alert("点了大…

JavaScript中捕获/阻止捕获、冒泡/阻止冒泡

JavaScript中捕获/阻止捕获.冒泡/阻止冒泡事件流描述的是从页面中接收事件的顺序.提出事件流概念的正是IE和Netscape,但是前者提出的是我们常用的事件冒泡流,而后者提出的是事件捕获流. 第一部分:事件冒泡即事件开始由最具体的元素接收,然后逐级向上传播到较为不具体的节点(文档). 下面举一个简单的例子: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF…

jQuery 学习笔记（5）（事件绑定与解绑、事件冒泡与事件默认行为、事件的自动触发、自定义事件、事件命名空间、事件委托、移入移出事件）

1.事件绑定: .eventName(fn) //编码效率略高,但部分事件jQuery没有实现 .on(eventName, fn) //编码效率略低,所有事件均可以添加注意点:可以同时添加多个相同或不同类型的事件 2.事件解除 .off() 不传参数: $('button').off() //解绑该对象的所有事件一个参数:$("button").off("click") //解绑该对象的“click”类型事件两个参数:$("button"…

JavaScript和JQuery中的事件\委托链\事件冒泡\事件捕获,兼容所有浏览器

有做过北大青鸟培训讲师经验的我,如今在一家公司做技术部经理的职位,发现有很多程序员的基本功相当糟糕,在组织企业内部培训时讲解了一些案例,总结了一些经典代码,希望对自己和有需要的人提供一些帮助吧: JavaScript版本: DOM0事件不支持委托链 <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-T…

vue中事件冒泡规则和事件捕获规则

<div id="app"> <div @click="handleClickOne"> <p @click="handleClickTwo">测试</p> </div> </div> <script src="./js/vue.js"></script> <script> var vm = new Vue({ el:…

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

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

javascript阻止事件冒泡和浏览器的默认行为

1.阻止事件冒泡,使成为捕获型事件触发机制. 1 function stopBubble(e) { 2 //如果提供了事件对象,则这是一个非IE浏览器 3 if ( e && e.stopPropagation ) 4 //因此它支持W3C的stopPropagation()方法 5 e.stopPropagation(); 6 else 7 //否则,我们需要使用IE的方式来取消事件冒泡 8 window.event.cancelBubble = true; 9 } 2.当按键后,不希望…

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

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

javascript -- 阻止默认事件阻止事件冒泡

1. event.preventDefault(); -- 阻止元素的默认事件.注:a元素的点击跳转的默认事件 , button,radio等表单元素的默认事件 , div 元素没有默认事件例: <a href="http://www.baidu.com" target="_black">百度</a> var samp = document.getElementByTagName("a"); samp.addEvent…

JavaScript 阻止默认时间和冒泡时间

<!DOCTYPE HTML><html> <head> <title>event cancel</title> </head> <body> <a href="https://www.baidu.com/">baidu</a> <div style="width: 400px; height: 300px; background: red;" id=&…

基本event封装：阻止冒泡、默认事件等

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> </head> <body> <div id="box"> <input type="button" value="按钮3" id="btn3"> <a href="http://www.so…

javascript阻止事件冒泡的兼容写法及其相关示例

//阻止事件冒泡的兼容写法 function stopBubble(e){ //如果提供了事件对象,则是一个非IE浏览器 if(e && e.stopPropagation) //因此它支持W3C的stopPropagation()方法 e.stopPropagation(); else //否则,我们需要使用IE的方式来取消事件冒泡 window.event.cancelBubble = true; } <!doctype html> <html> <hea…

JavaScript阻止事件冒泡（兼容IE、Chrome、FF）

这里仅仅是一个简单代码demo,因为时间问题并未做深入研究,因为今天做项目时要用到阻止事件冒泡的内容,找了好多才找到一个可以使用的,特记录之. <!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>阻止事件冒泡</title> <scr…

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

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

js阻止冒泡和默认事件（默认行为）详解- jquery DefaultPrevented 函数

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> #box { width: 300px; height: 300px; background: red; …

JavaScript 兼容各大浏览器阻止冒泡事件

JavaScript 兼容各大浏览器阻止冒泡事件 function stopEvent(event) { //阻止冒泡事件 //取消事件冒泡 var e = arguments.callee.caller.arguments[0] || event; //若省略此句,下面的e改为event,IE运行可以,但是其他浏览器就不兼容 if (e && e.stopPropagation) { // this code is for Mozilla and Opera e.stopPropagat…

在javascript中如何取消事件冒泡

如果在javascript中只希望事件发生在它的目标而不是在它的父元素上,即取消它的冒泡事件的发生,该如何做?因为按照javascript发生事件的顺序,它由两个阶段:分别从根元素--父元素--目标元素(捕获阶段),再到父元素--根元素(冒泡阶段). IE浏览器和其他浏览器提供了不同的方式来取消事件冒泡行为.下列函数提供了两种方式取消事件冒泡:标准的W3C方式和非标准的IE方式. function stopBubble(e){ //如果传入事件对象且支持W3C的stopPropagation的用…

jquery取消事件冒泡和取消默认行为

$('button').click(functon(e){ /*code*/ e.stopPropagation();//取消事件冒泡 e.preventDefault();//取消默认行为 })…

JavaScript 阻止事件冒泡的实现方法

JavaScript 阻止事件冒泡,无使用其它插件来辅助,原生JS代码,考虑到浏览器的兼容性问题,这里对IE/火狐.Operating以及Chrome都有针对性的判断,代码如下: function cancelBubble(evt) { // 阻止事件冒泡 if (window.event) { // Chrome,IE6,Opera window.event.cancelBubble = true; } else { // FireFox 3 evt.stopPropagation(); }…

Javascript:阻止浏览器默认右键事件，并显示定制内容

在逛一些知名图片社区的时候,遇到自己心怡的图片,想要右键另存的时候,默认的浏览器菜单不见了,却出现了如:[©kevin版权所有]之类的信息: 今天在看Javascript事件默认行为相关的知识,所以,动手实现了下类似效果: 鼠标右键的时候,会出现如下所示的内容在线演示地址:http://codepen.io/anon/pen/xGyXVy 相关代码: <!DOCTYPE html> <html lang="en"> <head> <meta…

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

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

【JavaScript阻止冒泡和取消事件默认行为】的更多相关文章