每日一记 - 但并不日更
最近在开发 chrome 的插件，方便微博用户下载图片和视频。
开发的过程中遇到很多问题，这边就记录一下关于快捷键的问题。方便遇到相同问题的小伙伴能参考。
现有问题
在 chrome 插件开发过程中，需要在既有网页里插入一个界面，这个界面需要输入一些内容，当输入的时候就会触发微博的快捷键。
触发了微博的快捷键
为什么体验可以这么差
这种体验用户肯定接受不了，那么就要想办法控制这个快捷键的触发。
解决思路
想要看结果的接着往下翻⬇这里讲整个过程
一开始为了解决问题，需要了解一下微博的快捷键逻辑是怎么设计的。
快捷键功能的是通过 keydown 和 keyup 事件触发的
所以先去看一下 dom 上哪里监听了这两个事件，在 html 节点上找到了3个监听
bingo
通过这里链接的源码，最后分析出
微博快捷键通过 STK.hotKey 接口来注册和移除
屏幕快照 2018-03-30 下午2.26.23.png
既然找到了监听的位置，接着就想能不能移除这些监听。
Chrome 插件是无法获取网页 window 对象的，只能获取到 dom 对象
由于 chrome 插件开发在安全方面的考虑，插件没法得到 window 对象，那么通过微博接口破解就没有办法了。
只得想办法通过 dom 来处理。去查一下文档看看有没有什么新发现。
Element
Element 继承了EventTarget，那么接着看看这个上面有什么方法.
EventTarget
Sad，这里除了 add 和 remove 没有更多的方法了，removeEventListener 是没有办法使用的
要通过 removeEventListener 移除监听就必须要有注册监听时的函数对象。
有点无路可走的心情，有点无法理解为什么无法获取到一个 dom 上绑定的监听列表，也没有办法简单的移除一个监听。（大概是安全考虑吧）
在网路上各种搜索后，发现了一丝线索，关于事件的传递。
事件既然可以传递，那么就有相应的方法拦截
事件的传递方式有两种：捕获和冒泡
阻止事件的传递有两个方法：stopPropagation 和 stopImmediatePropagation
event.stopPropagation() 可以从下一个节点阻止事件传播
event.stopImmediatePropagation() 可以从当前节点阻止事件传播
但是当前节点已经触发的事件无法阻止
这是什么意思呢，就是如果能成为节点上第一个注册的事件，那就有权利阻止随后注册的事件被触发（同一个事件名）
知道有这样的方法后就有办法解决了，让 chrome 插件在网页加载前加载，并成为 html 元素上第一个注册 keydown keyup 事件，那么就可以在需要的时候禁止快捷键被触发。
解决方法
// chrome 插件 manifest 配置
// 在网页加载前运行插件
"content_scripts": [
{
"js": [
"jquery.min.js"
"app.js"
],
"run_at": "document_start"
}
]
// chrome 插件 content_scripts
// app.js
$(document).ready(function () {
window.Weibo = {
disableKeyEvent: false
}
document.querySelector('html').addEventListener('keyup', function keydown (e) {
if (window.Weibo.disableKeyEvent) {
e.stopImmediatePropagation();
}
})
document.querySelector('html').addEventListener('keydown', function keydown (e) {
if (window.Weibo.disableKeyEvent) {
e.stopImmediatePropagation();
}
})
})
不受快捷键影响
在 window（插件的 window）上绑定了一个变量来控制是否禁止快捷键功能，这样技能保留微博快捷键的功能，也能在我需要输入文本的时候不打扰用户体验。
总结
- 快捷键功能的是通过 keydown 和 keyup 事件触发的
- 微博快捷键通过 STK.hotKey 接口来注册和移除
- Chrome 插件是无法获取网页 window 对象的，只能获取到 dom 对象
- event.stopPropagation() 可以从下一个节点阻止事件传播
- event.stopImmediatePropagation() 可以从当前节点阻止事件传播
但是当前节点已经触发的事件无法阻止
JSbin
罗小黑写写文字
如果喜欢文章 请留下一个赞~
如果喜欢文章 分享给更多人~自由转载-非商用-非衍生-保持署名（创意共享3.0许可证）
转载时请保留原文链接 以保证可及时获取对文章的订正和修改
网友评论