阻止子元素继承父元素事件具体思路及实现
<div id="p_box" onclick="a()">
<div id=p_cont>
</div>
</div>
#p_box包括#p_cont,当点击#p_box区域任何位置时(包括#p_cont),都会触发a事件。想要阻止点击#p_cont区域时触发a事件,需要在#p_cont区域内加入阻止事件冒泡的代码。
变成
代码如下:
<div id="p_box" onclick="a()">
<div id="p_cont" onclick="stopBubble(this.id)">
</div>
</div>
function a(){
//这里是a事件的代码
}
function stopBubble(e) {
if (e && e.stopPropagation) {//非IE浏览器
e.stopPropagation();
}
else {//IE浏览器
window.event.cancelBubble = true;
}
}
相关推荐
-
阻止子元素继承父元素事件具体思路及实现
复制代码 代码如下: <div id="p_box" onclick="a()"> <div id=p_cont> </div> </div> #p_box包括#p_cont,当点击#p_box区域任何位置时(包括#p_cont),都会触发a事件.想要阻止点击#p_cont区域时触发a事件,需要在#p_cont区域内加入阻止事件冒泡的代码. 变成 复制代码 代码如下: <div id="p_box&qu
-
Javascript中找到子元素在父元素内相对位置的代码
经过自己一晚上尝试,貌似找到了一个方法. 现在脑袋还糊涂,先记下来,以后再分析. 复制代码 代码如下: // 找到子元素在父元素中的相对位置 function getElementTop(element){ var el = (typeof element == "string") ? document.getElementById(element) : element; if (el.parentNode === null || el.style.display == 'none')
-
高效的获取当前元素是父元素的第几个子元素
例如处理事件的时候,有时候需要知道当前点击的是第几个子节点,而HTML DOM本身并没有直接提供相应的属性,需要自己来计算. 从一个索引序号,很容易得到该索引对应的子节点或者子元素,直接用parentNode.childNodes[index] 或 parentNode.children[index] 就行. 但反过来,已知一个节点或元素对象,要知道它的索引序号则没有那么直接了. 一些特殊的元素,HTML DOM有对应的属性表示其索引序号,主要是表格的TD 和 TR 元素. 表格单元格TD元素有
-
jQuery移除元素自动解绑事件实现思路及代码
世界本该如此! 所以,在现代浏览器,如果你将一个元素从DOM树种进行移除的时候,浏览器会自动帮你绑定的事件进行解绑以释放其占用的内存.也许你猜到了,较老版本的浏览器则不会主动去做这件事,所以,当你的应用在较老版本的浏览器运行的越久,其消耗内存越多,应用就会变得越来越卡.因此,需要我们自己对要删除的元素进行事件解绑. 实现思路 用jQuery将元素移除的基本方法常用的有三个,一个是remove()方法,一个是html()方法,一个是empty()方法.我们可以对此三个方法进行进一步的封装,我们会在
-
js 阻止子元素响应父元素的onmouseout事件具体实现
复制代码 代码如下: $(".target-menu").mouseout(function(e){ evt = window.event || e; var obj = evt.toElement || evt.relatedTarget; var pa = this; if(pa.contains(obj)) return false; $(this).hide(); });
-
子窗口给父窗口赋值实现思路及案例演示
今天Insus.NET练习JavaScript,实现从父窗口打开一个子窗口,在子窗口处理一些结果之后,把结果赋值于父窗口的文本框内.可看效果: 在站点创建两个aspx页面,一个是PageA.aspx另一个是PageB.aspx: 在PageA.aspx的<head>节点内,写Javascript脚本,脚本有两个方法,一个是打开子窗口,一个是为文本框设值的方法: 复制代码 代码如下: <script type="text/javascript"> functio
-
js与jquery获取父元素,删除子元素的两种不同方法
var obj=document.getElementById("id");得到的是dom对象,对该对象进行操作的时候使用js方法 var obj=$("#id");得到的是jquery对象,对该对象进行操作的时候使用jquery方法 1.对于上面获得的对象进行遍历 (1).js方法 for(vat i=0;j<obj.length;i++){ obj[i] 来获得对应的某一个元素} (2).jquery方法 $("#id").each
-
vue递归获取父元素的元素实例
使用递归查找父元素,知道查到想要的元素,然后return getParentTag(startTag) { var self = this; // 传入标签是否是DOM对象 if (!(startTag instanceof HTMLElement)) return; // 父级标签是否是body,是着停止返回集合,反之继续 let nodeName = ""; if (startTag.parentElement) { nodeName = startTag.parentElemen
-
Jquery搜索父元素操作方法
本文实例讲述了Jquery搜索父元素操作方法.分享给大家供大家参考.具体分析如下: 1. parents()方法 格式: 复制代码 代码如下: parents([selector]) 用于获取当前匹配元素集合中每个元素的祖先元素,根据需要还可以使用一个选择器进行筛选. 如: 复制代码 代码如下: $("p").parents().css("border", "1px solid blue); 2. cloest方法 格式: 复制代码 代码如下: close
-
javascript创建元素和删除元素实例小结
本文实例讲述了javascript创建元素和删除元素.分享给大家供大家参考,具体如下: 1.创建元素 动态创建新的DOM元素,是js操作网页对象模型的重要手段之一. <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>www.jb51.net 创建新元素</title> <script type=&qu
随机推荐
- Ajax请求在数据量大的时候出现超时的解决方法
- 给angular加上动画效遇到的问题总结
- asp.net网站首页根据IP自动跳转指定页面的示例
- BAT版文件粉碎器
- Mysql存储过程和函数区别介绍
- Java用for循环Map详细解析
- iOS中的UITextView文字输入光标使用技巧小结
- Java异常处理实例教程
- .NET添加时间戳防止重放攻击
- js下载文件并修改文件名
- linux系统安装字体详细介绍
- Android中删除文件以及文件夹的命令记录
- php+mysql实现无限分类实例详解
- PHP中Fatal error session_start()错误解决步骤
- php出现web系统多域名登录失败的解决方法
- Android之使用Android-query框架开发实战(二)
- Java分布式锁的三种实现方案
- jQuery插件EasyUI实现Layout框架页面中弹出窗体到最顶层效果(穿越iframe)
- JAVA中使用FTPClient实现文件上传下载实例代码
- Java中的final关键字详细介绍