。
图片.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 捕获阶段 2 处于目标 3冒泡阶段 e.preventDefault() e.stopImmediatePropagation() //阻止事件冒泡和所有事件处理程序 e.stopPropagation...事件发生时鼠标的视图位置 e.pageX e.pageY 事件发生时鼠标的页面位置 e.screenX e.screenY 事件发生时鼠标的屏幕位置 e.ctrlKey e.shiftKey...e.data //textinput 事件时输入的字符 e.iputMethod //0-9 输入来源，如键盘、粘贴、拖放等 事件类型 UI事件 load (window, img)...鼠标与滚轮事件 click dbclick mousedown 任何鼠标按键被按下时触发 mouseup mouseenter 不冒泡 mouseover 冒泡 mousemove...mouseleave 不冒泡 mouseout 冒泡 mousewheel contextmenu 鼠标右键弹出菜单 键盘事件 keydown keypress keyup
，离开按钮，只会弹出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、注意在循环里面不要使用匿名函数。
当我把鼠标移入，开始滚动操作时候，浏览器最右边的滚动条也会开始滚动。...我尝试在@mousewheel.native这个事件，第一行加入e.stopPropagation()，发现还是没有作用，最外层的body还是可以滚动。...原因分析 e.stopPropagation() 只阻止事件在 JavaScript 中的冒泡传播，但它不会阻止浏览器对滚轮事件的默认处理行为。...阻止鼠标右键菜单：通常点击鼠标右键会弹出浏览器的上下文菜单。你可以使用 e.preventDefault() 来阻止这种行为。...而e.preventDefault() 仅仅阻止默认行为，而不阻止事件传播。 总结 浏览器的滚动事件需要用preventDefault() 来阻止，这个事件写在某个页面元素上不会影响该元素的正常滚动。
浏览器默认行为： 在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对象。
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
ICP备案
对象存储
腾讯会议
实时音视频
