对“捕获”和“冒泡”这两个概念,通常我们对冒泡了解和使用的会更多一些,因为在我们使用的所有浏览器中,都支持事件冒泡 ,即事件由子元素向祖先元素传播的,就 像气泡从水底向水面上浮一样.而在像firefox,chrome,safari这类所谓的标准浏览器中,事件传播通常是有三个阶段的:事件捕获阶段,事 件目标阶段,事件冒泡阶段,这三者的执行的顺序是先捕获在冒泡.对于捕获阶段,这个很少 有用武之地,所以被人疏忽遗忘也在所难免了,不常用不代表它不存在,本着科学严谨的态度,我们有必要去看一下它的庐山真面目

先来看一下Js和Jquery的点击事件 举两个简单的例子 <!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> <m

一.用jquery动态绑定点击事件的写法 部分代码: <script type="text/javascript"> $(document).ready(function(){ $("#text").bind("click",function(){ alert("我的id为text,你点击时触发"); }); $("#text1").on("click",function()

<html> <head> <script type="text/javascript"> function fnclick1(){ alert("父元素弹窗") } function fnclick2(e){ //阻止跳转到其它页面(如提交表单跳转等) //e.preventDefault(); //阻止点击事件向上冒泡 e.stopPropagation(); alert("子元素弹窗"); } </

前言 工作中经常遇到这种情况:验证邮箱页面的重新发送需要在3分钟后才可以点击触发请求,所以在这之前需要禁用他的点击. 网上查了后有以下几种实现方法 1.css禁用鼠标点击事件 .disabled { pointer-events: none; }注:(这个没有试过) jquery禁用a标签方法1 01 $(document).ready(function () { 02         $("a").each(function () { 03             var textV

在某些情况下,我们需要自动执行一些点击事件.比如:一些 tab 一般是通过点击事件来加载不同的数据内容. 而如果要页面加载完直接显示第三个 tab,怎么办呢?此时就需要用到 jQuery 的模拟点击事件. 要用到 jQuery 的 trigger 方法. 如: $('#btn').trigger("click"); 会自动执行 id 为 btn 的 click 事件.还可以写成: $('#btn').click(); trigger() 方法不仅可以触发浏览器支持的同名事件,还可以支持

由于规定页面显示的PDF文件要有固定大小,使得页面风格统一 最开始发现了CSS样式pointer-events 写出如下代码,在360急速浏览器急速模式中访问可在点击PDF控件时可跳转页面 <a href="pdf文件.pdf" title="pdf文件.pdf" style="width:200px;display: inline-block; height: 200px;" target="_blank"> &

写html时这样绑定 <input type="text" name="address4" id="address4" onFocus="open1(this);"> 函数则加一个对象 function open1(ob) { var id=$(ob).attr("id"); alert(id); } 如果是超链接,这样写是无效的,获取不到id <a href="javascri

<div id="app"> <div @click="dodo"> <button @:click="doThis">阻止单击事件继续传播</button> </div> </div> <script> var app = new Vue({ el: "#app", data: { name: "Vue.js" }, me

<script type="text/javascript"> $(document).click(function(e){ e = window.event || e; var obj = e.srcElement || e.target; if(!$(obj).is("#keywords-area ul li")) { $("#keywords-area").hide(); } }); </script> 说明: 1.

$(document).click(function(e){  e = window.event || e; // 兼容IE7 obj = $(e.srcElement || e.target);    if ($(obj).is("#elem,#elem *")) {      // alert('内部区域');    } else {    alert('你的点击不在目标区域'); } });

//阻止起泡取消下面的注释 e.stopPropagation(); //或者使用这种方式 //return false; }); $('.three').click(function(e){ alert('three'); //阻止起泡取消下面的注释 e.stopPropagation(); //或者使用这种方式 //return false; }); });

一.任务需求:两个按钮,一个DIV,点击显示按钮显示DIV,点击隐藏按钮,隐藏DIV. 二.任务分析:监听按钮的点击,操作DIV的显示隐藏效果. 三.代码实现: <body> <button id="go_show">显示</button> <button id="go_hide">隐藏</button> <div style="height: 150px;width: 150px;back

触发 click 事件 $(selector).click()

<script src="https://cdn.staticfile.org/jquery/2.2.4/jquery.min.js"></script><!DOCTYPE html><html><head><meta charset="utf-8"><title>文档标题</title><script src="https://lib.sinaapp.c

$("button[name^='privateBtn']").click(function(){ alert('demo'); //接触绑定.避免重复执行 $("button[name!='privateBtn']").unbind('click'); });

<button type="submit" id="test">test</button> 第一种 $("#test").click(function(event){/* Act on the event */}); 第二种 document.getElementById('#foo').addEventListener('click', function() {/* Act on the event */}, false

一,使用id选择器 1.方式一 $("#id").click(function(){ do something }) 2.方式二 $("#id").on("click",function(){ do something }) 3.方式三 $(document.body).on('click', '#lucky-draw', function () {  do something })

JS中点击事件冒泡阻止 解析: 一个div层'out',内含有一个div层'in'.如下: 两个层都绑定了点击事件,但是点击in层的时候,点击事件会出现冒泡现象,同时也会触发out层的点击事件. 但是并不希望触发out的点击事件,只希望触发in层的点击事件,所以要阻止冒泡事件. 解决方法: e.preventDefault() 案例代码: <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> &l

在使用jQuery绑定点击事件的时候,有时候会遇到点击无效,这种情况大多出现在动态添加元素的时候 例如:给demo里添加li元素给li绑定点击事件 $("#demo").append('<li>点我</li>'); 给li元素绑定点击事件 // 示范一 $("#demo li").click(function(){ alert($(this).html()); }); // 示范二 $("#demo li").on('cl

鼠标和键盘悬停 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>鼠标悬停</title> <script type="text/javascript" src='./js/jquery.min.js'></script> <script type='tex