- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我的应用程序一直表现不佳。在删除越来越多的代码后,我设法找到了问题的核心,但这对我来说毫无意义。
一点背景。我的网络编辑器应用程序对击键使用react,例如当按下 Alt 时,调整大小的处理程序将被隐藏。它还对拖动、调整大小、删除、绘制选择框等鼠标操作使用react。在尝试事件处理程序并防止默认行为时(我不希望 Alt 将焦点更改为浏览器菜单,鼠标都无法选择文本),我发现了一个奇怪的事情。
当我为 keyup
和 keydown
创建事件处理程序(其中包含 preventDefault()
)时,它工作正常。但是,当我为 mousedown
添加处理程序时,它也可以工作,但以前的处理程序停止工作。如果我从 mousedown
处理程序中删除 preventDefault()
,则一切正常。
这是我的 JS 代码,被精简到最少(或者更确切地说,为了验证问题不在其他地方而创建):
// it works fine with these events
var events = ['keyup', 'keydown'];
// but when mousedown is added, its preventDefault() method somehow breaks keydown and keyup
//var events = ['keyup', 'keydown', 'mousedown'];
var log = document.getElementById('log');
var handler = function(e) {
log.innerHTML = e.type + '<br>' + log.innerHTML;
e.preventDefault();
}
for (var i = 0; i < events.length; i++) {
window.addEventListener(events[i], handler);
}
参见 jsfiddle here .
为什么 mousedown
处理程序中的 preventDefault()
方法会干扰按键事件?
在 Chrome 和 Firefox 中测试。
最佳答案
新:
我只需要进一步测试它。看来 this.focus()
与我的 documen.getElementById().focus()
和 window.focus()
一样有效最后更新。最佳实践 (IMO) 将使用 this
,因为它是对单击对象的通用引用。
最新旧版: New Demo
终于!我做错的是使用document
对象,而我应该使用window
。这次在任何测试的浏览器(甚至 IE11)中控制台都没有错误。所以代码应该如下所示:
var handler = function(e) {
log.innerHTML = e.type + '<br>' + log.innerHTML;
document.focus();
e.preventDefault();
}
旧2:这次我只是进一步测试了这一点。似乎 mousedown
上的 e.preventDefault()
不会破坏其他事件,并且按其应有的方式工作:防止默认操作(以及其他操作)设置 focus
到 DOM 元素上。我在本地 html 文件上尝试了相同的代码,它工作得很好。您需要做的就是自行将焦点设置在必须读取这些事件的对象上。
编辑: DEMO和handler
函数的代码:
var handler = function(e) {
log.innerHTML = e.type + '<br>' + log.innerHTML;
document.focus();
e.preventDefault();
}
旧 1: 这是因为 mousedown
事件会一直持续到您“放手”为止(尝试相同的代码,但使用 mouseup
而不是 鼠标按下
)。它只是不像 keydown
那样工作,其中事件被发送、结束,然后重复此事件,直到您停止按键。
关于javascript - Mousedown 事件处理程序会干扰按键处理程序,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/24632013/
我是 C 语言新手,我编写了这个 C 程序,让用户输入一年中的某一天,作为返回,程序将输出月份以及该月的哪一天。该程序运行良好,但我现在想简化该程序。我知道我需要一个循环,但我不知道如何去做。这是程序
我一直在努力找出我的代码有什么问题。这个想法是创建一个小的画图程序,并有红色、绿色、蓝色和清除按钮。我有我能想到的一切让它工作,但无法弄清楚代码有什么问题。程序打开,然后立即关闭。 import ja
我想安装screen,但是接下来我应该做什么? $ brew search screen imgur-screenshot screen
我有一个在服务器端工作的 UDP 套接字应用程序。为了测试服务器端,我编写了一个简单的 python 客户端程序,它发送消息“hello world how are you”。服务器随后应接收消息,将
我有一个 shell 脚本,它运行一个 Python 程序来预处理一些数据,然后运行一个 R 程序来执行一些长时间运行的任务。我正在学习使用 Docker 并且我一直在运行 FROM r-base:l
在 Linux 中。我有一个 c 程序,它读取一个 2048 字节的文本文件作为输入。我想从 Python 脚本启动 c 程序。我希望 Python 脚本将文本字符串作为参数传递给 c 程序,而不是将
对于一个类,我被要求编写一个 VHDL 程序,该程序接受两个整数输入 A 和 B,并用 A+B 替换 A,用 A-B 替换 B。我编写了以下程序和测试平台。它完成了实现和行为语法检查,但它不会模拟。尽
module Algorithm where import System.Random import Data.Maybe import Data.List type Atom = String ty
我想找到两个以上数字的最小公倍数 求给定N个数的最小公倍数的C++程序 最佳答案 int lcm(int a, int b) { return (a/gcd(a,b))*b; } 对于gcd,请查看
这个程序有错误。谁能解决这个问题? Error is :TempRecord already defines a member called 'this' with the same paramete
当我运行下面的程序时,我在 str1 和 str2 中得到了垃圾值。所以 #include #include #include using namespace std; int main() {
这是我的作业: 一对刚出生的兔子(一公一母)被放在田里。兔子在一个月大时可以交配,因此在第二个月的月底,每对兔子都会生出两对新兔子,然后死去。 注:在第0个月,有0对兔子。第 1 个月,有 1 对兔子
我编写了一个程序,通过对字母使用 switch 命令将十进制字符串转换为十六进制,但是如果我使用 char,该程序无法正常工作!没有 switch 我无法处理 9 以上的数字。我希望你能理解我,因为我
我是 C++ 新手(虽然我有一些 C 语言经验)和 MySQL,我正在尝试制作一个从 MySQL 读取数据库的程序,我一直在关注这个 tutorial但当我尝试“构建”解决方案时出现错误。 (我正在使
仍然是一个初学者,只是尝试使用 swift 中的一些基本函数。 有人能告诉我这段代码有什么问题吗? import UIKit var guessInt: Int var randomNum = arc
我正在用 C++11 编写一个函数,它采用 constant1 + constant2 形式的表达式并将它们折叠起来。 constant1 和 constant2 存储在 std::string 中,
我用 C++ 编写了这段代码,使用运算符重载对 2 个矩阵进行加法和乘法运算。当我执行代码时,它会在第 57 行和第 59 行产生错误,非法结构操作(两行都出现相同的错误)。请解释我的错误。提前致谢:
我是 C++ 的初学者,我想编写一个简单的程序来交换字符串中的两个字符。 例如;我们输入这个字符串:“EXAMPLE”,我们给它交换这两个字符:“E”和“A”,输出应该类似于“AXEMPLA”。 我在
我需要以下代码的帮助: 声明 3 个 double 类型变量,每个代表三角形的三个边中的一个。 提示用户为第一面输入一个值,然后 将用户的输入设置为您创建的代表三角形第一条边的变量。 将最后 2 个步
我是新来的,如果问题不好请见谅 任务:将给定矩阵旋转180度 输入: 1 4 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 输出: 16 15 14 13 12 11
我是一名优秀的程序员,十分优秀!