处理事件冒泡，阻止默认事件工具类，兼容IE

//处理事件冒泡,阻止默认事件工具类,兼容IEvar eventUtil={ // 添加句柄 addHandler:function(element,type,handler){ if(element.addEventListener){ element.addEventListener(type,handler,false); }else if(element.attachEvent){ //处理IE浏览器的兼容 element.attachEvent('on'+type,handler);…

vue 事件上加阻止冒泡阻止默认事件

重点 vue事件修饰符  <a v-on:click.stop="doThis"></a>  <form v-on:submit.prevent="onSubmit"></form>  <a v-on:click.stop.prevent="doThat"&…

事件处理及冒泡阻止默认事件以及tab 切换的思路

1.axios post通过点击事件提交数据不需要使用input直接使用state2.pdd你好天天象上默认执行点击(1,2,3)也可以执行并且能切换页码3.tab 针对新闻不同时4.天天象上首页和精品微课右侧鼠标滑过展示全内容代码如下: react/first-react/src/views/Event/index.jsx import React, { Component } from 'react'; import Tab from './tab-bak.jsx'; /* 1.驼峰形式…

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

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

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

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

JavaScript事件冒泡机制和阻止事件冒泡及默认事件

一.阻止事件冒泡: 1.html中加return false 2.js中加return false 3.IE下:window.event.cancelBubble = true: FF下:event.stopPropagation(); //阻止事件冒泡函数 function stopBubble(evt) { var e = evt || window.event; if (e && e.stopPropagation) e.stopPropagation() else window.…

Javascript和jquery事件--阻止事件冒泡和阻止默认事件

阻止冒泡和阻止默认事件—js和jq相同,jq的event是一个全局的变量我们写代码的时候常用的都是事件冒泡,但是有的时候我们并不需要触发父元素的事件,而浏览器也有自己的默认行为(表单提交.超链接跳转等). 点击按钮子元素的时候不希望触发父元素的点击事件. 之前提到的mouseout事件. 在大部分元素上滚动鼠标滑轮都会触发body的界面滑动(如果界面有滚动条) 在有滚动条的元素中滚动不会触发body界面的滑动,但是滑条滑到底部或者顶部并继续滑动的时候会触发父元素乃至body整体的界面滑动. 其…

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> &…

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

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

js阻止默认事件，如a标签跳转和事件冒泡

禁止a标签点击跳转 <a href="http://baidu.com" onclick="return false">点我啊</a> 原理是当点击a标签时首先触发onclick函数,然后才执行href的跳转.但是在执行到return false的时候直接终止了执行,也就没有了链接的跳转. 目前疑问是 return false 和 return true 以及 return 的作用都是结束当前函数的执行并分别返回 false,true,und…

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

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

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

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

vue.js阻止事件冒泡和默认事件

首先我们来看原生JS取消事件冒泡方法: e.stopPropagation(); //非IE浏览器window.event.cancelBubble = true; //IE浏览器原生JS阻止默认事件方法: e.preventDefault(); //非IE浏览器window.event.returnValue = false; //IE浏览器而vue.js给我们提供了更简便的方法,我们可以通过function($event)来获取事件对象,$event.target则是选择发生事件的目标元…

这可能是最简明扼要的 js事件冒泡机制+阻止默认事件讲解了

哎 js事件冒泡机制和阻止冒泡阻止默认行为好像永远也整不清楚,记了忘忘了记...醉了这篇文章写完以后下次再忘记就呼自己一巴掌,忘一次一巴掌首先要明白两个概念——事件和事件流事件指的是用户或浏览器自身执行的某种动作,又称为原始事件模型,例如onclick等事件流指的是从页面中接收事件的顺序,也就是说当一个事件产生时,这个事件的传播过程就叫做事件流. 事件冒泡: 从事件目标开始一级级向上冒泡,到document为止——从里到外 IE 5:div--body--document; I…

jquery 阻止冒泡事件和阻止默认事件

jQuery 冒泡和默认事件: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <script src="http://apps.bdimg.com/libs/jquery/1.7.2/jquery.js"></script>…

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

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

vue阻止事件冒泡和默认事件

本文地址:https://www.cnblogs.com/guomin/p/9273862.html 原生js取消事件冒泡 try{ e.stopPropagation();//非IE浏览器 } catch(e){ window.event.cancelBubble = true;//IE浏览器 } 原生js阻止默认事件 if ( e && e.preventDefault ) { e.preventDefault()//非IE浏览器 } else { window.event.retur…

js阻止冒泡和默认事件

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>阻止冒泡和默认事件</title> </head> <body> <button>阻止冒泡和默认事件</button> <script> function stopPropagation(e) {…

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

阻止浏览器默认事件.什么是默认事件,例如浏览器默认右键菜单.a标签默认连接跳转...,如何阻止呢? Firefox中,event必须作为参数传入. IE中,event是window对象的属性. event.preventDefault();方法用于取消默认事件,但是不兼容IE,在IE下,要用event.returnValue=false;来处理. document.oncontextmenu=function (ev) { var oEvent=ev||event; if (oEvent.pr…

Java解析Excel工具类(兼容xls和xlsx)

依赖jar <dependency> <groupId>org.apache.poi</groupId> <artifactId>poi-ooxml</artifactId> <version>4.0.1</version> </dependency> ExcelUtils.java package javax.utils; import java.io.File; import java.io.FileInp…

由href return false 来看阻止默认事件

很多时候我们都想阻止一个a ?link的href跳转. 1 <a onclick=” return false ;” href=”www. 360 .cn”>click</a> 以上代码可以达到这个效果有一点要注意 1 2 3 4 5 6 7 function stop(){ return false ; } <a onclick=”stop();” href=”www. 360 .cn”>click</a> 这么写是不会阻止默认事件的,…

阻止默认事件preventDefault与returnValue

通过阻止默认事件,禁止鼠标右键的使用 document.getElementById('dd').oncontextmenu = function(ev){ event = ev || window.event; if (event.preventDefault) { event.preventDefault(); }else{ // IE中阻止默认事件 event.returnValue = false; } alert('禁止使用鼠标右键');} 这样鼠标右键被禁止…

阻止右键菜单（阻止默认事件）&&跟随鼠标移动（大图展示）&&自定义右键菜单

<!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> <meta http-equiv="Content-…

Vue 事件修饰符阻止默认事件

阻止默认事件: <a v-on:click.prevent="doThat"></a>…

[oldboy-django][1初识django]阻止默认事件发生 + ajax + 模态编辑对话框

阻止默认事件发生 a 阻止a标签默认事件发生方法 <a href="http://www.baidu.com" onclick="modalEdit();">点击</a> 点击上面的a标签会有两个事件: modalEdit 以及跳转到百度首页, 优先级高的modalEdit() 如果想阻止跳转到百度首页事件发生,需改成如下: 标签内添加return <a href="http://www.baidu.com" on…

前端（十五）—— JavaScript事件：绑定事件方式、事件的冒泡和默认事件、鼠标事件、键盘事件、表单事件、文档事件、图片事件、页面事件

JS事件:绑定事件方式.事件的冒泡和默认事件.鼠标事件.键盘事件.表单事件.文档事件.图片事件.页面事件一.事件的两种绑定方式 1.on事件绑定方式 document.onclick = function() { console.log("文档点击"); } // on事件只能绑定一个方法,重复绑定保留最后一次绑定的方法 // .onclick = function (){} document.onclick = function() { console.log("文档点…

基本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 -- 阻止默认事件阻止事件冒泡

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

【处理事件冒泡，阻止默认事件工具类，兼容IE】的更多相关文章