。
图片.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
分析一下,实现这个功能需要:鼠标按下,鼠标移动和鼠标抬起几个功能方能实现,那么找到相应的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属性的方式返回滚动条的偏移量
如果JavaScript关注特定类型事件,那么它可以注册当这类事件发生时要调用的句柄。事件是某个行为或者触发,比如点击、鼠标移动........当用户点击鼠标时 当网页已加载时 当图像已加载时 当鼠标移动到元素上时 当用户触发按键时......DOM2级定义了addEventListener()和removeEventListener()用于处理指定和删除事件处理程序。...: e.stopPropagation(); event.stopPropagation(): 阻止捕获和冒泡阶段中当前事件的进一步传播。...;当点击结尾添加时在最后一个 li 元素后添加用户输入的非空字符串;(2)当点击每一个元素li时控制台展示该元素的文本内容。
,离开按钮,只会弹出1 事件冒泡有时候会带来麻烦,可以通过 e.stopPropagation()方法阻止事件冒泡 事件对象 事件处理函数可以带参数,带的参数就是事件对象。...,,它代表事件的状态,如键盘按键的状态、鼠标的位置、鼠标按钮的状态等。...e.stopPropagation() 例子: const btn = document.getElementById("btn"); btn.addEventListener("click...", (e) => { alert(1); e.stopPropagation(); //只要在事件处理函数里使用就会执行完这个函数,才阻止冒泡。...常用的鼠标事件 ontextmenu:鼠标右键菜单,可用于取消默认的菜单 selectstart:开始选中,可用于禁止选中文字 常用鼠标事件对象属性 案例 跟随鼠标的天使 常用的键盘事件 onkeypress
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(); } 在浏览器中设置
跟容器相关的拖拽事件 ondragenter:有元素被 拖拽到 元素范围内就触发 ondragleave:有元素被 拖离 元素范围内就触发 ondragover:鼠标移动时,元素在我的范围内就会触发...(非常频繁) ondrop: 鼠标松开时,元素还在我的范围内就会触发 * 注意点:这个事件默认不会触发,需要配合ondragover使用 <!...console.log('鼠标移动时,元素在我的范围内'); }; //4.ondrop //这个事件默认不会触发,需要配合ondragover使用...console.log('鼠标松开时,元素还在我的范围内'); }; 1.4-键盘事件及获取键盘按键 1.键盘事件 onkeydown...; if(e.stopPropagation){ e.stopPropagation(); }else{ e.cancelBubble
).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对象。
,此事件作用在被拖曳元素上 elem.addEventListener('dragenter', handleDragEnter, false) //当拖曳元素进入目标元素的时候触发的事件,此事件作用在目标元素上...('dragleave', handleDragLeave, false); //拖拽元素离开目标元素上移动的时候触发的事件,此事件作用在目标元素上 elem.addEventListener('drop...', handleDrop, false); //被拖拽的元素在目标元素上同时鼠标放开触发的事件,此事件作用在目标元素上 elem.addEventListener('dragend', handleDragEnd..., false); //当拖拽完成后触发的事件,此事件作用在被拖曳元素上 } var cols = document.querySelectorAll('#columns .column'); []....if (e.stopPropagation) { e.stopPropagation(); // Stops some browsers from redirecting. } //
领取专属 10元无门槛券
手把手带您无忧上云