个人中心
文章发布
退出
作者热门文章
- html - 出于某种原因，IE8 对我的 Sass 文件中继承的 html5 CSS 不友好？
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景？
25
4
下面是一些使用 javascript 创建一堆 div 元素作为像素的代码。我在 mouseover 事件中添加了一个事件监听器，并检查鼠标是否被按下。如果单击鼠标，我会更改该像素的颜色。最终结果是一个简单的绘图函数。
我相信使用 HTML5 canvas 之类的东西会更有效，但我只是在研究 DOM 以及事件的工作原理。
我面临的问题是，chrome 浏览器每隔一段时间就会认为我正在尝试拖动 body 或 div，而不再触发鼠标悬停事件。这似乎是一个不寻常的问题，我想知道是否有人知道如何避免它。
var numOfPxls = 0;
var resolution = "13px"
while (numOfPxls < 1300) {
const pxl = document.createElement("div");
pxl.classList.add("pxl");
pxl.style.cssText = `
height: ${resolution};
width: ${resolution};
`;
document.querySelector("body").appendChild(pxl);
pxl.addEventListener("mouseover", function(e){
// only continue if left click
if (e.buttons != 1) return;
this.style.backgroundColor = "pink";
});
numOfPxls++;
}body {
margin: 0;
background-color: black;
}
.pxl {
display: inline-block;
background-color: black;
}<body>
</body>最佳答案
万一以后有人偶然发现这个问题，我发现了这个问题。
“mousedown”事件的默认操作是启动拖动。 div 元素不能被拖动。要解决此问题，请使用事件的 preventDefault 方法。
即
添加到
...
pxl.addEventListener("mouseover", function(e){
// only continue if left click
if (e.buttons != 1) return;
this.style.backgroundColor = "pink";
});
...
与:
...
pxl.addEventListener("mouseover", function(e){
// only continue if left click
if (e.buttons != 1) return;
this.style.backgroundColor = "pink";
});
//new line to prevent drag default on mousedown
pxl.addEventListener("mousedown", e => e.preventDefault());
...
关于javascript - Chrome "Can not drag"图标干扰了鼠标悬停事件，我该如何防止这种情况发生？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/66058415/
25
4
0
我正在创建一个 sql server 存储过程，它将输入作为逗号分隔的 productid 或选项“全部”。当用户传入逗号分隔的产品 ID 时，查询应输出所有产品 ID 的数据。我使用“IN”语句执行
我有一个自动生成的 Web 服务客户端。我有很多复杂的类，我必须对其进行模式匹配。现在我的结构如下所示: val response = client.getResponse response matc
关闭。这个问题是opinion-based .它目前不接受答案。 想改进这个问题？更新问题，以便 editing this post 可以用事实和引用来回答它. 7年前关闭。 Improve this
我需要正确的 tsql 语法来解决这个问题: Select * from table where var_A='10' select * from table where var_B='10' 何时使
我遇到了这个问题。每当我运行程序并在需要时键入字母 m 时，我的 if 语句都不会识别它。有人知道为什么吗？我已经这样做了一个小时，但没有结果。 #include #include #includ
我从数据库列名称“你有护照”创建了一个表，用户回答是或否我如何将 css 应用到这个动态工作的表。 table, th, td { border: 1px solid black;
我对 LocationListener 类的 onStatusChanged 有一些疑问。 它知道它可以呈现三种状态:AVAILABLE、TEMPORARILY_UNAVAILABLE 和 OUT_O
当引入新的异常类型时，我总是不确定如何正确地做到这一点。有共同约定吗？你怎么做呢？ 我对您组织它们的范围感兴趣(将它们保留在它们所使用的单元中？在组件级别有一个单元？包级别？应用程序？) 这也会影响命
我使用以下内容创建了日期维度: https://www.codeproject.com/Articles/647950/Create-and-Populate-Date-Dimension-for-D
您好，我正在使用 Android 完全 Kiosk 浏览器，该浏览器使用 chrome Webview。但是 javascript 中的某些方法或函数无法正常工作，例如 window.print()。
我有以下代码: public void OpenFile(string FileName) { if (FileName == null)
获取索引越界异常 for (int recordData = 0; recordData < recordDataList.size(); recordData++) {
我使用它在发生错误时在登录中显示一条消息: × Invalid user or password
这是我的场景，我有一个异常列表，其中包含来自不同层次结构的任意异常，下面的代码快照将解释我需要做什么 private List connectionExceptions; try { // tryin
我尝试动态更新 Jtextpane 中的左缩进。但我不能!这是我尝试过的! DefaultStyledDocument document = (DefaultStyledDocument) textp
我不知道为什么这个异常不起作用...... import java.util.*; public class a { public static void main(String[] args
我目前在 case 中使用多个 when 时遇到问题。当我删除第二个当时，它就起作用了。这是什么问题？ 报告的MYSQL错误为: #1064 - You have an error in your S
例如，我有一个表记录用户查看和下载文件的事件， file_id user activity 2 Tim view 1 Ron
这是一个非常愚蠢的问题，但我需要一点安慰/帮助。我有当前的“递归”情况: void add( int value ) { // do something ... // if ( conditi
我尝试使用以下代码在按钮数组上注册回调。但我似乎无法理解如何绑定(bind)回调中需要的字符串。任何建议将不胜感激! for (var i = 0; i < this.car_types.length
我是一名优秀的程序员,十分优秀！