防止事件冒泡--jQuery事件处理

publicTIM 2011-07-26

l防止事件冒泡

知识点：

引用
假设面临事件冒泡的问题，如何阻止意外结果的发生。

事件对象的target（目标）属性：控制事件传播，并停止事件冒泡。利用target属性，可以确定哪个DOM元素首先接收到事件，并确保该事件不会自动传播到其他元素。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

  <head>

    <title>jQuery事件处理--防止事件冒泡</title>

    <script type="text/javascript" src="rs/js/jquery.js"></script>

    <script type="text/javascript">

    $(

        function()

        {

<!--            $('div').click(-->

<!--                function()-->

<!--                {-->

<!--                    alert('YOU HAVE CLICKED THE DIV ELEMENT!');-->

<!--                }-->

<!--            );-->

<!--            $('p').click(-->

<!--                function()-->

<!--                {-->

<!--                    alert('YOU HAVE CLICKED THE PARAGRAPH ELEMENT!');-->

<!--                }-->

<!--            );-->

<!--            $('span').click(-->

<!--                function()-->

<!--                {-->

<!--                    alert('YOU HAVE CLICKED THE SPAN ELEMENT!');-->

<!--                }-->

<!--            );-->

//          防止冒泡方式

            $('div').click(

                function(event)

                {

                    var tg = $(event.target);

                    if(tg.is('div'))

                        alert('YOU HAVE CLICKED THE DIV ELEMENT!');

                    if(tg.is('p'))

                        alert('YOU HAVE CLICKED THE PARAGRAPH ELEMENT!');

                    if(tg.is('span'))

                        alert('YOU HAVE CLICKED THE SPAN ELEMENT!');

                }

            );

        }

    )

    </script>

  </head>

  <body>

   <h2>防止事件冒泡</h2><br />

   <div>DIV ELEMENT

   <p>PARAGRAPH ELEMENT

   <span>SPAN ELEMENT</span>

   </p>

   </div>

  </body>

</html>
publicTIM

publicTIM

相关推荐

一篇文章带你了解JavaScript 数组迭代方法

在数组中的每个元素上一次操作的方法，称为迭代方法。forEach()方法对数组的每个元素执行一次提供的函数。由于2个参数是可选的。同时新数组中的元素为原始数组元素调用函数处理后的值，并按照原始数组元素顺序依次处理元素。map() 不会对空数组进行检测。例1

wikiwater / 0评论 2020-10-27

一文带你掌握JS高阶编程技巧！

用单独的实例来管理当前事物的相关特征，泛指属性和方法，类似于实现分组的特点，把一个实例的所有特征描述绑定在一个分组里。还有一种基于闭包实现的单例模式称为：高级单例设计模式，在vue/react出来之前，是团队协作最常用的模块化思想，常用来以此模块划分。我们

IdeaElements / 0评论 2020-08-19

自动化测试1

url=‘E:\\测试\\课件\\Web自动化\\Web自动化课件\\02img\\注册A.html‘

Feastaw / 0评论 2020-08-17

Element NavMenu导航菜单的使用方法

<el-menu-item index="3" disabled>消息中心</el-menu-item>. <el-menu-item index="4"><a href=&

Sophiego / 0评论 2020-08-16

浅谈柯里化函数

首先看看柯里化到底是什么？维基百科上说道：柯里化，英语：Currying，是把接受多个参数的函数变换成接受一个单一参数的函数，并且返回接受余下的参数而且返回结果的新函数的技术。看这个解释有一点抽象，我们就拿被做了无数次示例的add函数，来做一个简单的实现。

Kakoola / 0评论 2020-08-01

实现虚拟DOM

function createElement{ //创建虚拟DOM. function render{ //把虚拟DOM渲染到真实DOM节点。let elementList = [], //保存着一些元素数组，这些元素数组的第一项是父元素，其他项是子元素。

Kakoola / 0评论 2020-07-29

常用元素操作api之常见鼠标操作（一）

# 步骤：# 1.导入模块# 2.导入动作链条头# 3.设计动作# 4.执行from selenium import webdriverfrom selenium.webdriver.common.action_chains import ActionCh

ELEMENTS爱乐冬雨 / 0评论 2020-07-18

element全局设置按钮组件size

引入 Element 时，可以传入一个全局配置对象。该对象目前支持 size 与zIndex字段

sixthelement / 0评论 2020-07-05

二叉堆和堆排序

二叉堆是一种特殊的二叉树。它是一颗完全二叉树，表示树的每一层都有左侧和右侧子节点，并且最后一层的叶节点尽可能都是左侧子节点，这叫结构特性。二叉堆不是最小堆就是最大堆。最小堆允许快速导出树的最小值，最大堆允许快速导出输的最大值。

ELEMENTS爱乐小超 / 0评论 2020-07-04

三种注册事件方式的封装

//判断当前浏览器是否能支持addEventListener方法,ie9以下不支持。//传统流事件注册，兼容性好，但是无方法监听效果。//解绑事件，使事件只触发一次

ELEMENTS爱乐小超 / 0评论 2020-07-04

06前端css3增加选择器

element[attribute=‘value‘’] 匹配所有attribute属性值为value的元素，设置样式

vavid / 0评论 2020-06-28

一个Node.js的小爬虫

爬虫其实就是对网页内特定id、class、标签内容的提取，多是循环出来的，对我们爬取非常便利。node官网下载安装包安装，后在命令行工具中输入node -v查看node安装的版本。其中reqUrl为爬取目标网址，提取的obj即为最终获取的内容结构。

Kakoola / 0评论 2020-06-28

【Selenium】find_element()与find_elements()有什么区别？

Question：find_element()与find_elements()有什么区别？find_elements():查找页面上所有满足定位条件的元素，方法返回值为WebElement对象的列表。我们可以从源码webdriver.py中找到这2个方法的

Feastaw / 0评论 2020-06-18

element -ui select下拉框label显示多个值

placeholder="请选择优惠券类型"

sixthelement / 0评论 2020-06-16

临时对象

Element ele = 100； // 只会调用一次构造函数，直接用100来构造ele对象，构造在ele的预留空间中，不会生成临时对象，Func2; // 编译成功，系统会将100转换成一个临时对变量，再传给函数Func2. // noexcept

Wmeng0 / 0评论 2020-06-14

find_elements与find_element的区别

find_element不能使用len，find_elements可以使用len获取元素数量，判断页面有无某个元素，这个方法可以用来断言。如添加用户后，判断是否添加成功。E TypeError: object of type ‘WebEleme

ELEMENTS爱乐冬雨 / 0评论 2020-06-14

Selenium自动化测试工具使用方法汇总

from selenium.webdriver import ActionChains # 该类可执行鼠标动作：双击 拖拽等。它主要的意思就是：程序每隔xx检查一次，如果条件成立了，则执行下一步，否则继续等待，直到超过设置的最长时间，然后抛出Timeout

云之高水之远 / 0评论 2020-06-14

jquery.validate自定义验证用法实例分析【成功提示与择要提示】

本文实例讲述了jquery.validate自定义验证用法。分享给大家供大家参考，具体如下：。padding: 3px 5px 3px 21px;margin-left: 10px;margin-top: 0px;margin-bottom: 3px;ad

哈喽elements / 0评论 2020-06-14

Vue + Element table中的某行触发enter事件后，使该行disabled

废话不罗嗦，上硬菜。Disabled:[], // 该行是否禁止编辑。　this.Disabled[index] = true, // 使input不可编辑

Feastaw / 0评论 2020-06-11

js 调用 angularJs 的方法

var $scope = angular.element.scope(); // 如果先调用 Controller 里面的方法的话$scope.func1;// 改变了值之后还需要调用一下下面的方法, 才可以刷新最新改变的内容$scope.$apply()

阿斌Elements / 0评论 2020-06-11

selenium3+python自动化14-获取元素属性

5.获取元素的属性值：get_attribute，这里的参数可以是class、name等任意属性

ELEMENTS爱乐冬雨 / 0评论 2020-06-03

video标签的视频全屏

<divclass="fullScreen"@click="fullScreen"><iclass="el-icon-full-screen"></i><

wanwanwandj / 0评论 2020-06-02

循序渐进VUE+Element 前端应用开发(6）--- 常规Element 界面组件的使用

在我们开发BS页面的时候，往往需要了解常规界面组件的使用，小到最普通的单文本输入框、多文本框、下拉列表，以及按钮、图片展示、弹出对话框、表单处理、条码二维码等等，本篇随笔基于普通表格业务的展示录入的场景介绍这些常规Element组件的使用，使得我们对如何利

wanwanwandj / 0评论 2020-06-02

mybatis-generator报错：org.mybatis.generator.api.dom.xml.Element

mybatis-generator-core 版本太高, 更换为 即可

zhiyuan0 / 0评论 2020-06-02

一篇文章高效定位iframe

今天跟大家分享的是如何高效的定位iframe。我们来看一段最早的代码：。进入了iframe以后就像进入了一个盒子，盒子里面的东西可以找到，可是盒子外面的东西是找不到的。所以当我们操作完成，继续定位发现下图方框处变成Top Window时，证明这已经不是if

sixthelement / 0评论 2020-05-30

创建节点及其属性

<!

ELEMENTS爱乐冬雨 / 0评论 2020-05-29

edge浏览器导出execl只能选中.txt格式

const fileName = parseTime + ‘-‘ + name + ‘.‘ + suffix

ELEMENTS爱乐小超 / 0评论 2020-05-28

第二阶段学习总结

是一种轻量级的文本标记语言，语法简洁、不需要大量排版，以文本的形式实现html的效果，但是在许多cs美化方面并不能很好达到效果，可以用来高效开发文字排版页面。element UI 在vue.js这块的使用方法有鲜明的优势，无论从原生js还是jQuery来说

Feastaw / 0评论 2020-05-28

【selenium学习中级篇 -20】封装BasePage基础类

在Base包中新建一个BasePage.py 这个文件中，主要封装一些基础的操作，比如说打开url，关闭浏览器，点击，输入，获取元素等与业务逻辑无关的最底层的操作。这个类，可以根据不同的项目需求进行拓展，本文只是举了一个简单的例子

云之高水之远 / 0评论 2020-05-27

用DOM实现对XML文件的解析

DOM的 xml.dom.minidom 子模块、xml.dom.pulldom 子模块分别提供两种形式的解析器。该解析器解析成功，返回指定 XML 文件的一个文档对象。[‘Enemy Behind‘, ‘War, Thriller‘, ‘DVD‘, ‘P

Yakamoz / 0评论 2020-05-26

vue+axios实现http拦截及路由拦截

现如今,每个前端对于Vue都不会陌生,Vue框架是如今最流行的前端框架之一,其势头直追react.最近我用vue做了一个项目,下面便是我从中取得的一点收获.基于现在用vue+webpack搭建项目的文档已经有很多了,我就不再累述了.首先我们要明白设置拦截器

ELEMENTS爱乐冬雨 / 0评论 2020-05-25

优先级队列封装

let queueElement = new QueueElement(element, priority). if (!added) {. return this.items[0];return this.items.length == 0;return

Kakoola / 0评论 2020-05-26

Mybatis整合第三方缓存

　　1)为了提高扩展性。MyBatis定义了缓存接口Cache。我们可以通过实现Cache接口来自定义二级缓存　　2)EhCache 是一个纯Java的进程内缓存框架，具有快速、精干等特点.　　3)整合EhCache缓存的步骤:　　　　①导入ehcache

jimgreatly / 0评论 2020-05-25

element 的 Cascader 级联选择器设定默认值

发现在很多的CRM管理系统里面，都有不少页面是用到这种级联选择器的，确实，功能很实用，不过要设置默认值则应该让不少人头痛，因为你选择的时候 @change 事件的参数就是选中的值，一个二维数组，这个很简单就获得了。不过要设置默认参数，让 el-cascad

wanwanwandj / 0评论 2020-05-25

Element表单验证（1）

首先要掌握Element官方那几个表单验证的例子，然后才看下面的教程。其中，对于我们使用Element的来说，Rules最重要，也是这部分内容较多的。// 验证是根据字段名来的，rules.name 对应 source.name。source和callba

Kakoola / 0评论 2020-05-17

Element的el-cascader级联选择器组件获取选中的label（二）

给el-cascader组件设置ref为myCascader，设置change事件handleAreaChange. //handleAreaChange携带的val参数，获取的数据是label的value，我们需要的是label

阿斌Elements / 0评论 2020-05-15

jQuery Validate增加手机号码验证

}, "请正确填写您的联系电话");

ELEMENTS爱乐小超 / 0评论 2020-05-11

python_selenium简单记录一下

# Author:BeeLe# -*-coding:utf-8-*-import osimport randomimport timefrom time import sleepimport pywin32_system32from selenium im

Wmeng0 / 0评论 2020-05-10

Python selenium有多个class值时如何定位

classname有多个，可以用多个"."进行并行连接。

ELEMENTS爱乐冬雨 / 0评论 2020-05-10

数据结构——实现list

只实现最基本的add,remove,size,get方法。实现JDK的list对初学者难度太大，这里自己定义一个。

roseying / 0评论 2020-05-08

用rod获取百度搜索结果的例子

// use css selector to get the search input element and input "git". // wait until css selector get the element then g

ELEMENTS爱乐小超 / 0评论 2020-05-07

vue使用swiper出现Unknown custom element: &lt;swiper&gt;错误

在swiper3.4.2，vue-awesome-swiper3.1.3版本出现的错误，新版本不知道会不会还有这类问题。此类问题真心坑。

ELEMENTS爱乐小超 / 0评论 2020-05-07

Selenium元素定位之CSS定位

Selenium webdriver是完全模拟用户在对浏览器进行操作，所有用户都是在页面进行的单击、双击、输入、滚动等操作，而webdriver也是一样，所以需要我们指定元素让webdriver进行单击、双击、输入等操作，所以元素定位是UI自动化测试的前提

jiedinghui / 0评论 2020-05-06

selenium入门

本篇主要介绍了selenium常用的元素选择以及对应的元素操作句柄，同时介绍了一些如键盘操作、选择框、页面操作，键盘输入等常用方法。这行代码运行是，就会发起一个请求通过 浏览器驱动 转发给浏览器，告诉它，需要选择一个id为 kw 的元素。浏览器，找到id为

云之高水之远 / 0评论 2020-05-05

PO各个核心要素的介绍

先抽象封装一个BasePage类，这个基类拥有一些指向Webdriver实例的属性，然后每一个Page继承基类BasePage，可以通过driver管理每一个Page中的元素，而且在Page中将这些操作封装为一个一个的方法。TestCase继承unitte

阿斌Elements / 0评论 2020-05-05

[Java] Queue

java Queue中 add/offer，element/peek，remove/poll中的三个方法均为重复的方法，在选择使用时不免有所疑惑，这里简单区别一下：。add()和offer()都是向队列中添加一个元素。一些队列有大小限制，因此如果想在一个满

Kakoola / 0评论 2020-05-04

Selenium的PageObject设计模式(2)

def __init__(self, sheet_name, element_path=elements_path):. self.workbook = xlrd.open_workbook(self.element_path). def __init__

songerxing / 0评论 2020-05-03

js里关于各种尺寸的获取

获取元素可视部分的宽度，即 CSS 的 width 和 padding 属性值之和，元素边框和滚动条不包括在内，也不包含任何可能的滚动区域。当元素设置了 overflow:visible 样式属性时，元素的总宽度，也称滚动宽度。在默认状态下，如果该属性值大

sixthelement / 0评论 2020-04-30

selenium调用键盘

driver = webdriver.Chrome # 打开浏览器。element.send_keys #关闭窗口无效。

xiangxiaojun / 0评论 2020-04-26

vue element admin 关闭eslint校验

lintOnSave: false,

Wmeng0 / 0评论 2020-04-25