-- 阻止单击事件继续传播 比如A按钮定义到Bdiv上,两个都绑定了事件,我们在A按钮上加.stop可以使触发A按钮后就停止事件传播,不触发Bdiv上的事件 --> <a v-on:click.stop...你还可以通过全局 config.keyCodes 对象自定义按键修饰符别名: // 可以使用 `v-on:keyup.f1` Vue.config.keyCodes.f1 = 112 系统修饰键 可以用如下修饰符来实现仅在按下相应按键时才触发鼠标或键盘事件的监听器...,事件触发时修饰键必须处于按下状态。...换句话说,只有在按住 ctrl 的情况下释放其它按键,才能触发 keyup.ctrl。而单单释放 ctrl 也不会触发事件。...-- 有且只有 Ctrl 被按下的时候才触发 --> A <!
.esc (5) .space (6) .up (7) .down (8) .left (9) .right 系统修饰键 可以用如下修饰符来实现仅在按下相应按键时才触发鼠标或键盘事件的监听器。...,事件触发时修饰键必须处于按下状态。...换句话说,只有在按住 ctrl 的情况下释放其它按键,才能触发 keyup.ctrl。而单单释放 ctrl 也不会触发事件。...-- 有且只有 Ctrl 被按下的时候才触发 --> A A 鼠标按钮修饰符 (1) .left (2) .right
事件处理 实验介绍 页面上会有很多的页面交互,例如用户点击按钮,会触发什么样的事件,这个事件要做什么事情,就会涉及到事件处理。...-- 点击事件将只会触发一次 --> 不像其它只能对原生的 DOM 事件起作用的修饰符,.once 修饰符还能被用到自定义的组件事件上。...按键别名 Vue 为最常用的键提供了别名: .enter .tab .delete (捕获“删除”和“退格”键) .esc .space .up .down .left .right 系统修饰键 可以用如下修饰符来实现仅在按下相应按键时才触发鼠标或键盘事件的监听器...-- 有且只有 Ctrl 被按下的时候才触发 --> A A 鼠标按钮修饰符 .left .right .middle 这些修饰符会限制处理函数仅响应特定的鼠标按钮
第三个输入框的类型是number,最后得到的值也是number number.gif 系统修饰符 当点击事件或者键盘事件需要系统键同时按下才触发时.ctrl、.alt、.shift、.meta可以帮大忙噢...如下代码 全局监听keydown事件,尝试看.ctrl、.alt、.shift、.meta是否被按下 分别给四个按钮加上 .ctrl、.alt、.shift、.meta修饰符并配合点击事件,验证是否同时按下指定按键...} } system.gif 17 .ctrl 仅在按下ctrl按键时才触发鼠标或键盘事件的监听器,详细例子请看上面 18 .alt 仅在按下alt按键时才触发鼠标或键盘事件的监听器,详细例子请看上面...19 .shift 仅在按下shift按键时才触发鼠标或键盘事件的监听器,详细例子请看上面 20 .meta 仅在按下meta按键时才触发鼠标或键盘事件的监听器,详细例子请看上面 21 .exact...还是用上面的例子,看一下下面的gif, 此时我同时按下了alt和shift,对应的两个事件都可以触发 system2.gif 只想某个系统修饰键按下时才触发点击 没有任何系统修饰符被按下的时候才触发点击
,我们经常会遇到这种需求:用户输入账号密码后点击 Enter 键、一个多选筛选条件通过点击多选框后自动加载符合选中条件的数据等等。...2、系统修饰符 在 Vue 的2.1.0版本中,开发者又为我们提供了系统修饰符来实现仅在按下相应按键时才触发鼠标或键盘事件的监听器事件。...可能 gif 图表达的不是很清楚,当我点击 ctrl 按键时,没有执行我们的 log 方法,当我点击 c 按键时也并没有执行我们的自定义方法,可是当我按下 ctrl 按键时,又点击 c 按键时(这里的操作等同于你在编辑文档时使用...="log"> 4 类似的在 Vue 的2.2.0版本中,开发者又为我们提供了鼠标按钮修饰符去触发鼠标事件监听器。...例如下面的代码所示,当我们鼠标右键点击我们的按钮时才会触发我们的自定义 log 事件。
新增 可以用如下修饰符来实现仅在按下相应按键时才触发鼠标或键盘事件的监听器。...-- Ctrl + Click --> Do something 请注意修饰键与常规按键不同,在和 keyup 事件一起用时,事件触发时修饰键必须处于按下状态...换句话说,只有在按住 ctrl 的情况下释放其它按键,才能触发 keyup.ctrl。而单单释放 ctrl 也不会触发事件。...-- 有且只有 Ctrl 被按下的时候才触发 --> A A 鼠标按钮修饰符 2.2.0 新增 .left .right
△ 多种 Android 设备 要知道并非所有的用户都使用手机触摸屏与您的应用交互,一部分用户可能使用的是键盘和触控笔等,甚至一部分用户有 无障碍 需求。...那么每位开发者都有必要花些时间去思考,如何使应用为尽可能多的用户带来愉快的使用体验?...出色的键盘支持将会帮助您的应用实现更多的功能,一些应用甚至更进一步将高级功能放在用户触手可及的地方,比如用户在使用 eDJing 应用时,只需按住 Ctrl 键就可以用触控板搓碟。...请注意此时按下 Alt、Ctrl 或 Shift 键即可触发此操作。...游戏手柄按钮也有自己的键代码,您可以监听这些按钮就像这里为 X 按钮进行的设置一样。
接下来,通过定义缩写来设置 AutoKey 如何触发此短语。点击用户界面底部紧邻 “ 缩写(Abbreviations)” 的 “ 设置(Set)”按钮。...请不要勾选“ 在键入单词的一部分时触发(Trigger when typed as part of a word)”,这样,如果你键入包含 “grep”的单词(例如 “fingerprint”),就不会尝试将其转换为...image.png 在 AutoKey 中设置缩写 限制对特定应用程序的更正 你可能希望仅在某些应用程序(例如终端窗口)中打字排版错误时才应用校正。...每当我按下该热键时,它都会打开一个菜单,我可以在其中选择(要么使用 “方向键”+回车键要么使用数字)要插入的短语。这减少了我仅需几次击键就可以输入这些命令的击键次数。...使用数字或箭头键选择所需的项目。 高级自动键入 AutoKey 的 脚本引擎 允许用户运行可以通过相同的缩写和热键系统调用的 Python 脚本。
对象 了解 事件函数传入参 事件函数传入参 同时获取 原生MouseEvent对象的 写法 一个按钮 同时触发多个 回调函数 的写法 Vue的事件传递 Vue的默认事件传递是由里而外的【与安卓 自上而下的事件分发机制...按住ctrl键同时按住其他键,再点击组件,都可以响应回调: ?...加上.exact之后,只有单独按ctrl键点击组件才响应: 123456 @scroll.passive的.passive...可以提高滚动性能 按键事件指令@keydown 常规的按键回调指令是@keydown, 被该指令修饰的组件,只要点击了,就会触发相关的回调方法: <!...@keydown的按键修饰符tab、delete、esc、up、down、left、right等 意义同理于以上的.enter,被修饰的对应的组件需要输入对应修饰符的键, 才会触发按键事件keydown
鼠标按钮修饰符 刚刚我们讲到这个click事件,我们一般是会用左键触发,有时候我们需要更改右键菜单啥的,就需要用到右键点击或者中间键点击,这个时候就要用到鼠标按钮修饰符 .left 左键点击 .right...当我们写如下代码的时候,我们会发现如果仅仅使用系统修饰键是无法触发keyup事件的。 那该如何呢?....exact (2.5新增) 我们上面说了这个系统修饰键,当我们像这样绑定了click键按下的事件,惊奇的是,我们同时按下几个系统修饰键,比如ctrl shift点击,也能触发,可能有些场景我们只需要或者只能按一个系统修饰键来触发...(像制作一些快捷键的时候),而当我们按下ctrl和其他键的时候则无法触发。...注意:这个只是限制系统修饰键的,像下面这样书写以后你还是可以按下ctrl + c,ctrl+v或者ctrl+普通键 来触发,但是不能按下ctrl + shift +普通键来触发。
鼠标与滚轮事件 事件 说明 click 用户点击主鼠标按钮(一般是左边的按钮)或者按下回车键时触发; dblclick 用户双击主鼠标按钮(一般是左边的按钮)时触发。...这个事件并不是DOM2级事件规范中规定的,其得到广泛应用,在DOM3中将其纳入了标准; mousedown 用户按下任意鼠标按钮时触发; mouseenter 鼠标光标从元素外部首次移动到元素范围内时触发...键盘与文本事件 事件 说明 keydown 用户按下键盘上的任意键时触发,而且如果按住不放的话,会重触发此事件。...keypress 用户按下键盘上的字符键时触发,而且如果按住不放的话,会重触发此事件。 keyup 用户释放键盘上的键时触发。...textInput 只有可编辑区域才有该事件,用户按下能够输入实际字符的键时才会被触发。在文本插入文本框之前触发,通常用于过滤敏感词。
事件句柄(Event Handlers) HTML 4.0 的新特性之一是能够使 HTML 事件触发浏览器中的行为,比如当用户点击某个 HTML 元素时启动一段 JavaScript。...onreset 重置按钮被点击。 onresize 窗口或框架被重新调整大小。 onselect 文本被选中。 onsubmit 确认按钮被点击。 onunload 用户退出页面。...鼠标 / 键盘属性 属性 描述 altKey 返回当事件被触发时,"ALT" 是否被按下。 button 返回当事件被触发时,哪个鼠标按钮被点击。...clientX 返回当事件被触发时,鼠标指针的水平坐标。 clientY 返回当事件被触发时,鼠标指针的垂直坐标。 ctrlKey 返回当事件被触发时,"CTRL" 键是否被按下。...screenY 返回当某个事件被触发时,鼠标指针的垂直坐标。 shiftKey 返回当事件被触发时,"SHIFT" 键是否被按下。
-- 点击事件将只会触发一次 --> 0x02 按键修饰符 在监听键盘事件时,我们经常需要检查常见的键值。....down .left .right 0x03 系统修饰键 可以用如下修饰符来实现仅在按下相应按键时才触发鼠标或键盘事件的监听器。...-- Ctrl + Click --> Do something 注意: 请注意修饰键与常规按键不同,在和 keyup 事件一起用时...,事件触发时修饰键必须处于按下状态。...换句话说,只有在按住 ctrl 的情况下释放其它按键,才能触发 keyup.ctrl。而单单释放 ctrl 也不会触发事件。
6 表示同时按下了次鼠标按钮和中间的鼠标按钮 7 表示同时按下了三个鼠标按钮 PS:在绝大部分情况下,我们最多只使用主次中三个单击键,IE给出的其他组合键一般无法使用上。...这些键为:Shfit、Ctrl、Alt和Meat(Windows中就是Windows键,苹果机中是Cmd键),它们经常被用来修改鼠标事件和行为,所以叫修改键。...用户在使用键盘时会触发键盘事件。...值,因为按shift并没输入任何的字符,并且也不会触发keypress事务 PS:在keydown事务里面,事务包含了keyCode – 用户按下的按键的物理编码。...,当几个都具有事件的元素层叠在一起的时候,那么你点击其中一个元素,并不是只有当前被点击的元素会触发事件,而层叠在你点击范围的所有元素都会触发事件。
04 - Web APIs 学习目标: 能够说出常用的3-5个键盘事件 能够知道如何获取当前键盘按下的是哪个键 能够知道浏览器的顶级对象window 能够使用window.onload事件...('我按下了press'); }) //2. keydown 按键按下的时候触发 能识别功能键 比如 ctrl shift 左右箭头啊 document.addEventListener...使用keyCode属性判断用户按下哪个键 // 键盘事件对象中的keyCode属性可以得到相应键的ASCII码值 document.addEventListener...码值来判断用户按下了那个键 if (e.keyCode === 65) { alert('您按下的a键'); } else...如果页面的图片很多的话, 从用户访问到onload触发可能需要较长的时间, 交互效果就不能实现,必然影响用户的体验,此时用 DOMContentLoaded 事件比较合适。
-- 点击事件将只会触发一次 --> <!...$event.key === 'PageDown' 时被调用 系统修饰键 .ctrl .alt .shift .meta Do something .exact 修饰符允许你控制由精确的系统修饰符组合触发的事件...-- 即使 Alt 或 Shift 被一同按下时也会触发 --> A A <!
(2)Network面板(爬虫中过滤请求及过滤数据类型必用——比如过滤掉异步加载出来的请求!) (3)设置断点(爬虫高级中JS渗透必用到的操作!) 第一部分:如何使用! 第二部分:逐步调试!...④cookie-name:cookie中的键。可以过滤包含有此cookie的键的请求。 (3)设置断点(爬虫高级中JS渗透必用到的操作!) 第一部分:如何使用!...也可以将这些断点配置为仅在满足特定条件时触发。 在源代码的左侧,您可以看到行号。这个区域称为line number gutter(行号槽)。单击行号槽中的行号,就会在该行代码上添加一个断点。...例如事件,DOM更改。 第二部分:逐步调试! 第三部分:作用域! 当脚本中断的时候,Scope(作用域)窗格将显示当前时刻所有当前定义的属性。 第四部分:调用堆栈!...这有助于理解现在执行到哪里,它是如何到达这里的,是调试的一个重要因素。 调用函数链,下面调用上面的函数 2.Chrome快捷键大全 (1)标签页和窗口快捷键(重点:常用!)
onunload:在用户从页面离开时发生,例如点击跳转,页面重载,关闭浏览器窗口等。 2、Form表单事件 onblur:当元素失去焦点时触发。 ...onchange:在元素的元素值被改变时触发。 onfocus:当元素获得焦点时触发。 onreset:当表单中的重置按钮被点击时触发。 ...onselest:在元素中文本被选中后触发。 onsubmit:在提交表单时触发。 3、Keyboard键盘事件 onkeydown:在用户按下按键时触发。 ...onkeypress:在用户按下按键后,按着按键时触发。该属性不会对所有按键生效,不生效的有:ALT、CTRL、SHIFT、ESC onkeyup:当用户释放按键时触发。...onmousedown:当在元素上按下鼠标按钮时触发。 onmousemove:当鼠标指针移动到元素上时触发。 onmouseout:当鼠标指针移出元素时触发。
和right to left lang属性 用于指定元素内容的语言 HTML的全局事件属性 window窗口事件 onload在页面加载结束之后触发 onunload在用户从页面离开时发生 form表单事件...onblur当元素失去焦点时触发 onchange在元素的元素值被改变时触发 onfocus当元素获得焦点时触发 onreset当表单中的重置按钮被点击时触发 onselect在元素中文本被选中后触发...onsubmit在提交表单时触发 keyboard键盘事件 onkeydown在用户按下按键时触发 onkeypress在用户按下按键后,按着按键时触发。...该属性不会对所有按键生效,不生效的有,alt,ctrl,shift,esc onkeyup当用户释放按键时触发 mouse鼠标事件 onclick当元素上发生鼠标点击时触发 onblclick当元素上发生鼠标双击时触发...onmouseup当在元素上释放鼠标按钮时触发 media媒体事件 onabort当退出时触发 onwaiting当媒体已停止播放但打算继续播放时触发。
领取专属 10元无门槛券
手把手带您无忧上云