<i>阻止鼠标事件冒泡

2024-11-05

javascript里阻止事件冒泡

如下图所示,灰色块包含红色块,假设我们为灰色和红色块各绑定一个单击弹框事件,当我们点击红色块时,不希望触发灰色块的弹框事件,这就需要阻止冒泡事件了. IE里阻止冒泡事件使用cancelBubble属性,如果事件句柄想阻止事件传播到包容对象,必须把该属性设为 true. 火狐等非IE浏览器阻止冒泡事件使用stopPropagation()方法.调用该方法后,该节点上处理该事件的处理程序将被调用,事件不再被分派到其他节点. 我们看代码实例: <!doctype html> <html lan

阻止JS事件冒泡传递（cancelBubble 、stopPropagation）

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="Test.WebForm1" %> <!DOCTYPE html><html><head><title> 阻止JS事件冒泡传递(cancelBubble .stopPropagation)</

JQuery 阻止js事件冒泡阻止浏览器默认操作

//阻止事件冒泡 event.stopPropagation(); //阻止浏览器默认操作 event.preventDefault(); 代码不一定能执行,写给自己看的. 事件冒泡: <a href="javascript:alert('啦啦啦');"> <ul onclick="alert('德玛西亚');"> <li onclick="alert('大盖伦');"></li> </ul&

javascript 停止事件冒泡以及阻止默认事件冒泡

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

阻止jQuery事件冒泡

Query对DOM的事件触发具有冒泡特性.有时利用这一特性可以减少重复代码,但有时候我们又不希望事件冒泡.这个时候就要阻止 jQuery.Event冒泡. 在jQuery.Event 的文档中的开头得知,jQuery.Event对象是符合W3C标准的一个事件对象,同时jQuery.Event免去了检查兼容IE的步骤. jQuery.Event提供了一个非常简单的方法来阻止事件冒泡:event.stopPropagation(); $("p").click(function(event

阻止touchslider事件冒泡，防止左右滑动时出发全局滑动事件

最近适用mui开发一个项目,全局有个侧滑菜单offCanvasSideScroll,首页用了一个touchslider插件来实现行的左右滚动 touchslider的当滚动方向与侧滑菜单滚动方向一致时,会触发侧滑菜单的事件,打开侧滑菜单.开始想关闭侧滑菜单的监听事件,点击按钮再调出侧滑菜单,百度无果. 后来想touchslider滚动时能不能阻止事件向上冒泡,从官网下载touchslider源码先是再开始函数增加event.stopPropagation(); 结果各种问题,滚动时有小幅的上

阻止check事件冒泡

在Datagrid中添加了checkbox,想实现的效果是: 1.点击行中任意位置,该行的复选框变为选中状态,同时该行也获得焦点: 2.点击复选框,复选框打勾,同时该行获取焦点. 要实现功能1,用到datagrid的itemclick事件,如下代码: 1 /**单击行,使checkbox处于选中状态**/ protected function workerdata_itemClickHandler(event:ListEvent):void { var obj:DataGrid = event.

阻止vue事件冒泡的方法

jQuery阻止事件冒泡的例子

下面给给各位朋友稍加整理了一jquery中阻止事件冒泡的一些例子,我们知道JQuery 提供了两种方式来阻止事件冒泡,但我们简单的利用它来做一些应用可能不深入或不理解,下面整理了更详细的方法,有兴趣的朋友可进入参考. jQuery.Event提供了一个非常简单的方法来阻止事件冒泡:event.stopPropagation(); 代码如下复制代码 $("p").click(function(event){ event.stopPropagation(); // do so

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

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

jquery 事件冒泡的介绍以及如何阻止事件冒泡

在一个对象上触发某类事件(比如单击onclick事件),如果此对象定义了此事件的处理程序,那么此事件就会调用这个处理程序,如果没有定义此事件处理程序或者事件返回true,那么这个事件会向这个对象的父级对象传播,从里到外,直至它被处理,挺起来感觉这么不可思议,接下来为大家解除疑惑什么是JS事件冒泡? 在一个对象上触发某类事件(比如单击onclick事件),如果此对象定义了此事件的处理程序,那么此事件就会调用这个处理程序,如果没有定义此事件处理程序或者事件返回true,那么这个事件会向这个对象的父

JavaScript阻止事件冒泡

今天在自学敲代码的时候发现了一个问题,当时的例子如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <style> #div1{ height: 200px; width: 200px; background-color: #3b77

在点击div中的p时，如何阻止事件冒泡？

今天整理笔记,发现在学习javaScript的过程中,遇到过一个在当时看来很棘手的问题,现在特地总结一下,也希望能帮助到曾像我一样迷惘的初学者. 我还是以一个案例来说明问题,html代码如下: <div onclick="show('a')"> <p onclick="show('b')"></p> </div> css代码如下: div{ width:500px; height:500px; background:r

React 中阻止事件冒泡的问题

在正式开始前,先来看看 JS 中事件的触发与事件处理器的执行. JS 中事件的监听与处理事件捕获与冒泡 DOM 事件会先后经历捕获与冒泡两个阶段.捕获即事件沿着 DOM 树由上往下传递,到达触发事件的元素后,开始由下往上冒泡. IE9 及之前的版本只支持冒泡 | A -----------------|--|----------------- | Parent | | | | -------------|--|----------- | | |Children V | | | | --

vue2.0阻止事件冒泡

<transition name="fade"> <div class="picker_wrap" v-show="roomSelectShow" @click="cancelSelect"> <div class="picker_alert" @click.stop> <div class="picker_hea

vue.js 自带阻止默认事件阻止冒泡

<a v-on:click.stop="doThis"></a>  <form v-on:submit.prevent="onSubmit"></form>  <a v-on:click.stop.prevent="doThat"> &

JS阻止事件冒泡的3种方法之间的不同

什么是JS事件冒泡?: 在一个对象上触发某类事件(比如单击onclick事件),如果此对象定义了此事件的处理程序,那么此事件就会调用这个处理程序,如果没有定义此事件处理程序或者事件返回true,那么这个事件会向这个对象的父级对象传播,从里到外,直至它被处理(父级对象所有同类事件都将被激活),或者它到达了对象层次的最顶层,即document对象(有些浏览器是window). 如何来阻止Jquery事件冒泡? 通过一个小例子来解释 <%@ Page Language="C#" A

vue 表格阻止父元素冒泡事件

思路如下:1.给复选框定义一个类型,type="selection" 2.在点击函数中就可以使用判断条件来进行复选框的阻止冒泡.rowDetailShow(row, event, column) {if(column.type !== 'selection') {this.selectedItem = rowthis.detailShow = true}this.tableIndex = row.tableId},这样是一种方法,因为复选框一般都是与表格同步存在的.还有一种简单的方法,

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

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

JS如何阻止事件冒泡

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default5.aspx.cs"Inherits="Default5"%> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DT

JS事件冒泡

JavaSciprt事件中有两个很重要的特性:事件冒泡以及目标元素. 事件冒泡: 当一个元素上的事件被触发的时候,比如说鼠标点击了一个按钮,同样的事件将会在那个元素的所有祖先元素中被触发.这一过程被称为事件冒泡:这个事件从原始元素开始一直冒泡到DOM树的最上层. 目标元素: 任何一个事件的目标元素都是最开始的那个元素,在我们的这个例子中也就是按钮,并且它在我们的元素对象中以属性的形式出现.使用事件代理的话我们可以把事件处理器添加到一个元素上,等待一个事件从它的子级元素里冒泡上来,并且可以很方

<i>阻止鼠标事件冒泡

热门专题