图片.png 当鼠标聚焦时输入框变色 css相关,鼠标点击输入域后出现有颜色的边框 原理：css伪类之input输入框鼠标点击边框变色效果 伪类元素的使用：:focus 一：当输入框获得焦点时...，改变它的背景色 效果图：当鼠标聚焦时输入内部填充色改变 图片.png 鼠标点击输入域后出现有颜色的边框 111 ========================== 二：效果图：当鼠标聚焦时外部...this.className = ''; }; } } } window.onload = function () { focusInput('focusInput'); } 请输入姓名
（阻断事件的继续执行） <!...alert("你的输入为空"); event.preventDefault() // 阻断默认事件的进行，即浏览器不会再刷新界面 }...find("select").val(selectValue); // 默认找到全部checkbox为选中的 } }) 7.鼠标悬停事件之..."); // } // ); $('.top-menu').on('mouseenter', '.shopping-car', function() {//绑定鼠标进入事件...this).addClass('hover'); }); $('.top-menu').on('mouseleave', '.shopping-car', function() {//绑定鼠标划出事件
onclick = "clicktest('次奥')"/> 2.鼠标移动事件 Mousemove：鼠标移动时触发事件 鼠标跟随效果 Mouseover：鼠标从元素外，移动元素之上，信息提示...、字体变色 Mouseout：鼠标从元素上，移出元素范围，和mouseover一起使用 3.鼠标点击事件（左键相关事件） click 鼠标单击事件 dbclick 鼠标双击事件 mousedown/mouseup...鼠标按下、按键弹起 click = mousedown + mouseup; oncontextmenu 鼠标右键菜单事件 （不是浏览器兼容事件） 4.聚焦离焦事件 focus 聚焦 页面焦点定位到目标元素...= false; } } } // 阻止事件冒泡 functionaclick(e){ alert("a"); if(e && e.stopPropagation){ // 火狐浏览器 e.stopPropagation...> HTML DOM Event对象 提供preventDefault()用于阻止默认事件的发生， 该方法IE 不支持 ，在IE中使用 returnValue 提供stopPropagation
禁止鼠标右键菜单 contextmenu主要控制应该何时显示上下文菜单，主要用于程序员取消默认的上下文菜单。...鼠标事件对象 说明 e.clientX 返回鼠标相当于浏览器窗口可视区的X坐标 e.clientY 返回鼠标相对于浏览器窗口可视区的Y坐标 e.pageX 返回鼠标相对于文档页面的X坐标 IE9+支持...案例分析导航栏里面的li都要有鼠标经过效果，所以需要循环注册鼠标事件核心原理：当鼠标经过li里面的第二个孩子ul显......键盘事件 事件除了使用鼠标触发，还可以使用键盘触发。...，模拟自动大字号 模拟按键输入内容核心思路：检测用户是否按下了s键，如果按下s键，就把光标定位到输入框里面。
鼠标点击、鼠标移动、鼠标滚动、按下键盘，浏览器窗口大小的改变，网页加载完成，关闭网页等等都会发生事件。 2、什么是事件流 事件流，描述的是页面中接受事件的顺序。...三、阻止冒泡 1、JS阻止事件冒泡 我们用 e.stopPropagation() 这个方法添加到某事件函数里的末尾，就可以做到阻止冒泡事件。...但是IE8及以下不支持e.stopPropagation() 方法，所以就封装一个方法。...讲事件捕获之前先了解下addEventListener()方法： addEventListener()定义与用法 document.addEventListener() 方法用于向文档添加事件句柄。...当事件触发时，事件对象会作为第一个参数传入函数。事件对象的类型取决于特定的事件。例如， “click” 事件属于 MouseEvent(鼠标事件) 对象。 useCapture 可选。
简介 IE6实现了鼠标滚轮事件mousewheel，这个事件包含了一个鼠标事件所没有的属性，wheelDelta，这 个属性值始终是120的倍数，而且向上滑动一单位，wheelDelta值为120，...另外，HTML5为了兼容这两个事件，另外规定了一个标准版本wheel事件，比较新的浏览器基本实现了该事件。...综上，目前wheel事件的兼容性其实并不理想，mousewheel的兼容性最佳，适用于除Firefox外的所有浏览器，对于 Firefox则单独做兼容处理。...e.delta = e.wheelDelta / 120; 28 } 29 callback.call(el,e); 30 //阻止向上冒泡 31 e.stopPropagation...&& e.stopPropagation(); 32 if("stopBubble" in e) e.stopBubble = true; 33 return false
，离开按钮，只会弹出1 事件冒泡有时候会带来麻烦，可以通过 e.stopPropagation()方法阻止事件冒泡 事件对象 事件处理函数可以带参数，带的参数就是事件对象。...，，它代表事件的状态，如键盘按键的状态、鼠标的位置、鼠标按钮的状态等。...e.stopPropagation() 例子： const btn = document.getElementById("btn"); btn.addEventListener("click...", (e) => { alert(1); e.stopPropagation(); //只要在事件处理函数里使用就会执行完这个函数，才阻止冒泡。...常用的鼠标事件 ontextmenu：鼠标右键菜单，可用于取消默认的菜单 selectstart：开始选中，可用于禁止选中文字 常用鼠标事件对象属性 案例 跟随鼠标的天使 常用的键盘事件 onkeypress
如果JavaScript关注特定类型事件，那么它可以注册当这类事件发生时要调用的句柄。事件是某个行为或者触发，比如点击、鼠标移动........当用户点击鼠标时 当网页已加载时 当图像已加载时 当鼠标移动到元素上时 当用户触发按键时......DOM2级定义了addEventListener()和removeEventListener()用于处理指定和删除事件处理程序。...： e.stopPropagation(); event.stopPropagation(): 阻止捕获和冒泡阶段中当前事件的进一步传播。...；当点击结尾添加时在最后一个 li 元素后添加用户输入的非空字符串；（2）当点击每一个元素li时控制台展示该元素的文本内容。
分析一下，实现这个功能需要：鼠标按下，鼠标移动和鼠标抬起几个功能方能实现，那么找到相应的js事件：mousedown、mousemove、mouseup 找到这几个事件，基本上我们的功能可以说完成了一半了...，只需要在里面做相应事件处理就能搞定了，具体看下代码，很简单的操作： 拖拽div <!...) e.stopPropagation(); //标准模型 else e.cancelBubble = true; } function upHandler...e) e = window.event; //ie事件模型 //注销捕获事件处理程序 if (document.removeEventListener)...) e.stopPropagation(); //标准模型 else e.cancelBubble = true; } //以一个对象的x和y属性的方式返回滚动条的偏移量
2、常见的事件 事件是某个行为或者触发，比如点击、鼠标移动、提交表单，滚动菜单等等 二、事件流 1、事件流的作用 事件流描述的是从页面中接收事件的顺序，比如有两个嵌套的div，点击了内层的div，这时候是内层的...3、DOM2事件处理程序 3.1简介 DOM2事件处理程序可以解决不能绑定多个事件处理函数的问题 DOM2级事件定义了两个方法用于处理指定和删除事件处理程序的操作： addEventListener removeEventListener...给捕获阶段的box加e.stopPropagation()之后的结果 ?...六、常见的事件类型 常见事件类型 解析 click 单击 dblclick 双击 focus 焦点，比如表单input把光标放上去开始输入的时刻 blur 失去焦点，比如输入完成切换到下一个输入框时，就失去了焦点...，注意进入元素的子元素会重复触发 mouseout 鼠标拿出去触发，注意离开元素的子元素会重复触发 mouseenter 鼠标进入触发，进入子元素不会触发，比较常用 mouseleave 鼠标离开触发，
e.stopPropagation(); 注意：Chrome,firefox 支持， IE8 不支持。...} my$("dv3").onclick = function(e) { console.log(this.id); e.stopPropagation...2、这里使用的是鼠标输入文字后的鼠标抬起事件：onkeyup。 3、 需要准备个临时数组存储于文本框输入文字匹配的字符串。 4、当搜索框的文本为空或者临时数组的内容为空时，循环删除下拉列表。...5、之所以输入多个文字，但是只创建了一个下拉列表的原因是因为在输入第二个文字的时候，先输入的其实是字母，这个时候不匹配，而我们在每次鼠标抬起的时候会清空临时数组，所以这个时候会先删除下拉列表，当我们输入第二个文字的时候...6、每次进入鼠标抬起按键时，如果有下拉列表就循环删除。 7、注意在循环里面不要使用匿名函数。
浏览器默认行为： 在form中按回车键就会提交表单；单击鼠标右键就会弹出context menu. a标签 1..停止事件冒泡 JavaScript代码 1 //如果提供了事件对象，则这是一个非IE浏览器...2 if ( e && e.stopPropagation ) 3 //因此它支持W3C的stopPropagation()方法 4 e.stopPropagation(); 5 else 6 //...return false; } 但是在使用return false时必须注意： 1、jQuery有自己的事件处理层，也对处理程序做了封装，如果事件处理程序返回false，事件冒泡和浏览器默认事件都会被阻止...2、使用原生javaScript，在事件处理程序中返回false只会阻止浏览器默认行为，而事件冒泡依然存在。 3、浏览器默认行为和事件冒泡是相互独立的。阻止事件冒泡不会影响默认行为，反之亦然。...注意： 有一些浏览器行为是在事件处理程序执行前发生的，也就是说这些默认行为是无法取消的，如：在大部分浏览器上鼠标移到一个超链接上超链接的样式会发生改变，这个动作是发生在focus事件之前的，是focus
DOM事件流（event flow ）存在三个阶段：事件捕获阶段、处于目标阶段、事件冒泡阶段。...事件捕获*（****event capturing****）*：通俗的理解就是，当鼠标点击或者触发dom事件时，浏览器会从根节点开始由外到内进行事件传播，即点击了子元素，如果父元素通过事件捕获方式注册了对应的事件的话...dom标准事件流的触发的先后顺序为：先捕获再冒泡，即当触发dom事件时，会先进行事件捕获，捕获到事件源之后通过事件传播进行事件冒泡。...参数 useCapture 是选填的，填true或者false，用于描述事件是冒泡还是捕获，true表示捕获，默认的false表示冒泡。...解决办法 function stopBubble(e) { if (e && e.stopPropagation) { e.stopPropagation
window.event.cancelBubble = true : e.stopPropagation(); } js阻止默认行为 function myfn(e){ window.event? ...什么是冒泡事件？如在一个按钮是绑定一个”click”事件，那么”click”事件会依次在它的父级元素中被触发 。stopPropagation就是阻止目标元素的事件冒泡到父级元素。...window.event.cancelBubble = true : e.stopPropagation(); 阻止默认行为 w3c的方法是e.preventDefault()，IE则是使用e.returnValue...，则这是一个非IE浏览器 if ( e && e.stopPropagation ) //因此它支持W3C的stopPropagation()方法 e.stopPropagation...event代表事件的状态，例如触发event对象的元素、鼠标的位置及状态、按下的键等等； event对象只在事件发生的过程中才有效。
事件，要想在Child上点击鼠标时系统只响应Child的Mouse_Down事件，默认是不行的，因为事件冒泡会让Container也响应Mouse_Down事件，示例代码： package { import...(color,1); s.graphics.drawRect(0,0,width,height); s.graphics.endFill(); return s; } } } 鼠标点击最小的矩形后...private function subChildMouseDownHandler(e:MouseEvent):void{ e.stopImmediatePropagation(); //或 //e.stopPropagation...s.graphics.drawRect(0,0,width,height); s.graphics.endFill(); return s; } } } 重复刚才的测试，在最小的矩形_sub_Child上点击，输入如下...sub_child.MOUSE_DOWN_2 再试下stopPropagation方法 private function subChildMouseDownHandler2(e:MouseEvent):void{ e.stopPropagation
防止冒泡和捕获 w3c的方法是e.stopPropagation()，IE则是使用e.cancelBubble = true stopPropagation也是事件对象(Event)的一个方法，用是阻止目标元素的冒泡事件...什么是冒泡事件？如在一个按钮是绑定一个”click”事件，那么”click”事件会依次在它的父级元素中被触发 。 stopPropagation就是阻止目标元素的事件冒泡到父级元素。...window.event.cancelBubble = true : e.stopPropagation(); 取消默认事件 w3c的方法是e.preventDefault()，IE则是使用e.returnValue...，则这是一个非IE浏览器 if ( e && e.stopPropagation ) //因此它支持W3C的stopPropagation()方法 e.stopPropagation...event代表事件的状态，例如触发event对象的元素、鼠标的位置及状态、按下的键等等； event对象只在事件发生的过程中才有效。
用户可能会对点击一次鼠标后发生多个动作感到困惑，而你通常会保持你的事件处理脚本彼此分离。当用户点击了一个元素，一个动作被触发，点击另一个元素就会触发另一个动作。...可能当用户大幅度地移动鼠标时脚本无法正常工作，导致鼠标不会在图层上出现。 如果onmousemove事件句柄注册给了图层，图层就不会对鼠标移动做出反应，这会让人困惑。...如果onmouseup事件句柄在图层上被注册，事件就不会被捕获。所以图层会保持对鼠标的反应，甚至当用户以为自己放下图层后仍会保持反应。...e.stopPropagation() 这会阻止冒泡阶段事件的传递。在跨浏览器时： function doSomething(e) { if (!...e) var e = window.event; e.cancelBubble = true; if (e.stopPropagation) e.stopPropagation(); } 在浏览器中设置
).style.[ height | width ] dom.style.width这种方式只能取到行内属性， 而不是css属性 5、HTML title属性：定义关于元素的额外信息，这些信息会在鼠标悬浮时显示一段工具提示文本...鼠标悬浮显示nihao 6、各大浏览器对应内核 Trident IE系列 Wenkit Chrome、Safari ...，隐藏div 2、对btn的点击事件绑定事件处理程序，阻止事件冒泡。...if (e.stopPropagation) e.stopPropagation(); else e.cancelBubble = true; } $(document...event，这个对象包含着所有与事件有关的信息，包括产生事件的元素、事件类型等相关信息，思路一中div的click事件处理程序传入的参数就是这个event对象。
false停止传播，已不可用； 取而代之的是需要手动调用e.stopPropagation()或e.preventDefalult()....，而不是普通的冒泡，并且没有捕获阶段；只有在鼠标指针穿过被选元素时，才会触发。...onMouseOut onMouseOver事件：不论鼠标指针穿过被选元素或其子元素，都会触发。...e.stopPropagation() console.log("原生事件绑定事件触发") } 由于DOM事件被阻止冒泡了，无法到达document，所以合成事件自然不会被触发...){ e.stopPropagation() console.log("子元素原生事件绑定事件触发") } onReactChildClick(e){
怎么才能阻止冒泡事件？在js中常用的鼠标事件和键盘事件，在实开发中会遇到很多的地方需要用到这些比如mousemove，keydown等，本篇就来了解一下这些吧！...特点return后面的代码不执行 只能用于传统的方式哦 a.onclick = function (e) { return false; } 5.鼠标点击事件...5.1鼠标事件禁止页面文本复制contextmenu主要控制应该何时显示上下文菜单,主要用于程序员取消默认的上下文菜单禁止选中文字selectstart 我的地盘我做主！
领取专属 10元无门槛券
手把手带您无忧上云
