`
bevis.cn
  • 浏览: 154570 次
  • 性别: Icon_minigender_1
  • 来自: 杭州
社区版块
存档分类
最新评论

javascript阻止冒泡事件

阅读更多
<script>function StorePage(){d=document;t=d.selection?(d.selection.type!='None'?d.selection.createRange().text:''):(d.getSelection?d.getSelection():'');void(keyit=window.open('http://www.365key.com/storeit.aspx?t='+escape(d.title)+'&u='+escape(d.location.href)+'&c='+escape(t),'keyit','scrollbars=no,width=475,height=575,left=75,top=20,status=no,resizable=yes'));keyit.focus();}</script>

在网页中的html里呈现一个dom树的结构,如果用户在网页里触发一个事件,这个事件也会一层一层的网上传递,但是我们网页上有时候可以想事件传到某一层后就不要再往上传了,那这样的话,我们可以用用javascript来阻止事件往上传,

有一个例子,例子很简单:

<html>
<head>
<script type="text/javascript">
function test1(evt){
alert(1);
stopevent(evt);
}
function test2(){
alert(2);
}


function stopevent(evt){
var e=(evt)?evt:window.event;
if (window.event) {
e.cancelBubble=true;
} else {
e.stopPropagation();
}
}
</script>
</head>
<body>

<form onclick="test2()">
<select id="select1" onclick="test1(event)">
<option>Apple</option>
<option>Pear</option>
<option>Banana</option>
<option>Orange</option>
</select>
<br />
</form>
</body>
</html>

网页代码很简单,当我click这个select的时候,会触发select的onclick的事件,那这个事件会处理触发test1这个function,由于html中js事件是冒泡一样的,把select事件中的click这个事件往上传,于理这个click的事件传到form这一层,会触发form的onclick这个事件( function test2会被调用);

但是由于

function test1(evt){
alert(1);
stopevent(evt);
}

由于test1中stopevent(evt)就阻止了select的click事件往上传,于是form节点上会收不到onclick事件,于是不会再触发test2这个function。

如果把

//stopeven(evt);注释掉后就会往上传。

分享到:
评论

相关推荐

    javascript阻止事件冒泡的一种方法

    总结一下,阻止事件冒泡是JavaScript中控制事件处理流程的关键技巧,它允许开发者更精细地管理事件响应。通过`event.stopPropagation()`和`event.stopImmediatePropagation()`,我们可以防止事件在DOM树中向上传播,...

    阻止滚动条事件冒泡

    在JavaScript中,我们可以使用`event.stopPropagation()`方法来阻止事件冒泡。当我们在监听的事件处理函数中调用这个方法时,可以确保事件不会继续向上层元素传播。例如,如果我们在一个内部元素上监听`mousewheel`...

    JavaScript事件冒泡示例.html

    JavaScript事件冒泡是Web开发中的一个关键概念,它在网页交互和动态效果中扮演着重要角色。事件冒泡源于浏览器处理事件的...熟练掌握事件冒泡、事件捕获以及如何阻止冒泡,对于提升JavaScript的事件处理能力至关重要。

    JavaScript捕捉事件和阻止冒泡事件实例分析

    本文通过实例分析了如何在JavaScript中捕捉事件以及如何阻止冒泡事件。 事件冒泡是指事件在DOM(文档对象模型)树中从最具体的节点(子节点)向上级节点(父节点)传播的过程。当一个元素发生事件,如点击(onclick...

    js阻止冒泡及jquery阻止事件冒泡示例介绍.docx

    // 不仅阻止冒泡,也阻止了事件本身 }); }); &lt;div id="ee"&gt;aaaaa &lt;a href="baidu.com"&gt;baidu.com&lt;/a&gt; ``` 在这个例子中,点击按钮时会触发多个事件处理函数,但通过使用`event.stopPropagation();`和`...

    【JavaScript源代码】javascript事件冒泡,事件捕获和事件委托详解.docx

    JavaScript中的事件处理是Web开发中的核心概念,主要涉及事件冒泡、事件捕获以及事件委托。这三种机制在处理用户交互和DOM元素之间的事件时起着至关重要的作用。 1. **事件冒泡**:事件冒泡是事件处理的默认模式,...

    javascript 中事件冒泡和事件捕获机制的详解

    javascript 中事件冒泡和...Jquery的e.stopPropagation会阻止冒泡,意思就是到DOM为止,祖先级的事件就不要触发了  下面是我尝试的例子: &lt;!DOCTYPE html&gt; &lt;html lang=en&gt; &lt;head&gt; &lt;meta char

    Javascript 阻止javascript事件冒泡,获取控件ID值

    事件冒泡和获取控件ID值是JavaScript事件处理中的两个重要概念,对于理解JavaScript事件模型以及创建交互式网页至关重要。以下是关于这两个概念的详细说明: 1. **事件冒泡** 事件冒泡是指事件开始时由最具体的元素...

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

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

    jQuery中阻止冒泡事件的方法介绍

    ### 一、冒泡事件简介 冒泡事件在用户与网页交互时特别常见。例如,当用户点击一个嵌套在其他元素内的按钮时,该点击事件会首先在按钮上触发,然后依次向上级元素传递。在jQuery中,如果父元素和子元素都绑定了同一...

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

    1. `cancelBubble`函数内部首先判断浏览器是否支持`stopPropagation`方法,这是W3C标准中的事件阻止冒泡方法。对于不支持此方法的老版本IE浏览器,它会使用`cancelBubble = true`来达到相同的效果。 2. 在`show(info...

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

    如果想要阻止事件冒泡,可以在事件处理函数中调用`event.stopPropagation()`方法,这将阻止事件继续向上层元素传播。例如,修改按钮的事件处理程序,添加`event.stopPropagation()`: ```javascript document....

    js阻止默认事件与js阻止事件冒泡示例分享 js阻止冒泡事件

    在处理事件时,有时我们需要阻止默认行为或者防止事件冒泡,以确保事件按照我们的预期执行。本篇将详细介绍`event.preventDefault()`和`event.stopPropagation()`的用法,并提供示例。 1. **阻止默认事件**: 当一...

    阻止JavaScript事件冒泡传递(cancelBubble 、stopPropagation)

    阻止JavaScript事件冒泡传递(cancelBubble 、stopPropagation) 在JavaScript事件处理机制中,事件冒泡传递是一个重要的概念。当一个元素触发某个事件时,该事件就会沿着DOM树向上传递,直到到达文档的根元素为止...

    Js冒泡事件详解及阻止示例

    对于使用jQuery的情况,可以直接在事件处理函数内调用`event.stopPropagation()`,或者返回`false`以同时阻止冒泡和默认行为。 在实际应用中,事件冒泡可能导致不期望的行为,比如多个事件处理函数被意外触发。因此...

    JS事件冒泡浏览器兼容

    此外,`event.stopPropagation()`方法可以阻止事件继续向上冒泡,而`event.stopImmediatePropagation()`则不仅可以阻止冒泡,还能阻止同一元素上的其他事件处理函数被执行。 总结一下,JavaScript事件冒泡是浏览器...

    JavaScript阻止事件冒泡示例分享

    除了阻止冒泡,还有其他与事件处理相关的两个重要方法: 1. `event.preventDefault()`: 这个方法通知浏览器不要执行与事件关联的默认动作。例如,点击链接默认会跳转到新的URL,但通过调用`preventDefault()`,可以...

    zepto.js中tap事件阻止冒泡的实现方法

    总结来说,zepto.js中虽然tap事件不支持直接阻止冒泡,但是我们可以通过事件委托的方式,在document级别处理tap事件,然后通过判断事件的目标元素来间接实现阻止冒泡的效果。这样做可以在不改变tap事件特性的前提下...

    JavaScript程序设计——事件处理实验报告.docx

    - **停止事件冒泡**:通过`event.stopPropagation()`阻止事件继续向上层元素传播。 - **阻止事件的默认行为**:通过`event.preventDefault()`防止默认的浏览器行为,例如阻止链接跳转、表单提交等。 实验内容覆盖...

Global site tag (gtag.js) - Google Analytics