个人中心
文章发布
退出
作者热门文章
- html - 出于某种原因，IE8 对我的 Sass 文件中继承的 html5 CSS 不友好？
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景？
27
4
我正在用 JavaScript 创建一个简单的图片拼图游戏，并尝试实现 HTML5 拖放 API。如果我向元素添加 ondragstart、ondragover 或 ondrop 事件(即作为属性)，它就会起作用。
但是，由于同一类别中有相当多的不同元素，我需要添加事件监听器(如果我尝试用更多 block 制作拼图，事件监听器只会增加)，所以我使用 addEventListener 来添加事件。但是，如果我这样做，它就不起作用。我已经在 Chrome 和 Firefox 中进行了测试。根据记录，我真的很想看看是否可以使用 HTML5 拖放 API 而不是使用 jQuery 来实现此功能。
这是相关的 JavaScript:
var piecesOnPage = document.querySelectorAll("#pieces img");
var puzzleSlots = document.getElementsByTagName("td");
function enableDrop(ev) {
ev.preventDefault();
}
function dragPiece(ev) {
ev.dataTransfer.setData("text", ev.target.id);
}
function dropPiece(ev) {
ev.preventDefault();
var data = ev.dataTransfer.getData("text");
ev.target.appendChild(document.getElementById(data));
}
function createEventListeners() {
if (piecesOnPage[0].addEventListener) {
for (i = 0; i < piecesOnPage.length; i++) {
piecesOnPage[i].addEventListener("dragStart", dragPiece, false);
}
} else if (piecesOnPage[0].attachEvent) {
for (i = 0; i < piecesOnPage.length; i++) {
piecesOnPage[i].attachEvent("onDragStart", dragPiece);
}
}
if (puzzleSlots[0].addEventListener) {
for (i = 0; i < puzzleSlots.length; i++) {
puzzleSlots[i].addEventListener("drop", dropPiece, false);
}
} else if (puzzleSlots[0].attachEvent) {
for (i = 0; i < puzzleSlots.length; i++) {
puzzleSlots[i].attachEvent("onDrop", dropPiece);
}
}
if (puzzleSlots[0].addEventListener) {
for (i = 0; i < puzzleSlots.length; i++) {
puzzleSlots[i].addEventListener("dragOver", enableDrop, false);
}
} else if (puzzleSlots[0].attachEvent) {
for (i = 0; i < puzzleSlots.length; i++) {
puzzleSlots[i].attachEvent("onDragOver", enableDrop);
}
}
}
if (window.addEventListener) {
window.addEventListener("load", createEventListeners, false);
} else if (window.attachEvent) {
window.attachEvent("onload", createEventListeners);
}
这是随附的 HTML。请注意，为了演示正常事件有效但 addEventListener 无效这一事实，我已将正常事件添加到第一个拼图 block 和第一个拼图槽中。这些工作正常，但其余的则不然。
<!DOCTYPE html>
<html lang="en">
<meta charset="utf-8">
<head>
<title>Puzzles</title>
<style>
table {
border:1px #000000 solid;
border-collapse:collapse;
float:right;
margin:10px;
}
td {
padding:0;
line-height:0;
height:96px;
width:157px;
}
</style>
</head>
<body>
<table class="puzzleboard">
<thead></thead>
<tbody>
<tr><td id="space1" ondrop="dropPiece(event)" ondragover="enableDrop(event)"></td><td id="space2"></td><td id="space3"></td></tr>
<tr><td id="space4"></td><td id="space5"></td><td id="space6"></td></tr>
<tr><td id="space7"></td><td id="space8"></td><td id="space9"></td></tr>
</tbody>
</table>
<div id="pieces">
<img id="img1" draggable="true" ondragstart="dragPiece(event)" src="2-2.jpeg"><img id="img2" draggable="true" src="1-2.jpeg"><img id="img3" draggable="true" src="2-1.jpeg"><br>
<img id="img4" draggable="true" src="0-2.jpeg"><img id="img5" draggable="true" src="1-0.jpeg"><img id="img6" draggable="true" src="0-1.jpeg"><br>
<img id="img7" draggable="true" src="1-1.jpeg"><img id="img8" draggable="true" src="2-0.jpeg"><img id="img9" draggable="true" src="0-0.jpeg"><br>
</div>
<script src="final-so.js"></script>
</body>
</html>
有史以来第一个堆栈溢出问题，希望我没有做任何太愚蠢的事情;)
最佳答案
为 img 元素添加一些高度和宽度。
<img id="img1" draggable="true" ondragstart="dragPiece(event)" src="2-2.jpeg" height="100" width="100">
这解决了问题
关于JavaScript addEventListener 无法与 onDrop、onDragOver 或 onDragStart 一起使用，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/42359555/
27
4
0
我想在按下按钮时打开一个表单，然后在完成表单后创建另一个按钮以将数据存储在对象中。 我这样做了，但在第二个 addEventListener 中它给了我这个错误: cannot read proper
这是我实际代码的简化版本。 有三个复选框和按钮(每个编号为 0、1、2)和一个提交按钮。简而言之，如果您选中复选框编号 1 和 2，单击提交，按钮 1 和 2 将被着色。现在您可以单击任何彩色按钮，它
问题代码 var el = document.getElementById("searchcharm_'"+touch_id+"'"); el.addEventListener('click',
window.document.addEventListener = function(event) {...} window.addEventListener = function(event) {
这段代码块有什么区别: var xhr = new XMLHttpRequest(); xhr.upload.addEventListener("progress", uploadProgress,
在使用 PhoneGap 时，它有一些使用 document.addEventListener 的默认 JavaScript 代码，但我有自己的代码使用 window.addEventListener
当我运行这段代码时，为什么 .body 事件先触发？ document.addEventListener('click', function() { console.log('The docume
我将带有循环的 addEventListener 添加到一些 anchor 元素 products 中，如下所示: for(var j=0;j
所以我的代码可以按我想要的方式工作，但是大多数(IE 除外)调试器都会向我抛出此错误: 未捕获类型错误:无法读取未定义的属性“addEventListener” 这是代码: //Get all ele
我真的不知道为什么这不起作用。在我的 HTML 中，如果我将脚本放在 head 部分，我会在控制台中收到以下错误: Uncaught TypeError: Cannot read property '
在 React 中，当你有一个带有 onClick 属性的元素时，很容易使用 Enzyme 的 .simulate("click") 方法来点击它。然而，在我的代码库中有一个示例，其中一个元素被 Re
问候，由于某种原因，当我单击按钮时，我的 -addEventListener 没有执行。任何人都可以帮忙这是我的代码: function elNegro() { alert("Thank Yo
我正在将我的一些代码从 onClick 更改为 addEventListener，因为我已经阅读了各种好处，并且出于关注点分离的目的。然而，我遇到的问题之一是，虽然使用 onClick，我能够调用一个
我正在尝试向我在循环中生成的某些元素添加事件监听器。我必须使用 div.lastChild - 虽然在这个例子中它非常愚蠢。但这只是演示: var func = function() {
我在将事件监听器添加到 JS 时遇到问题...如果我将按钮与 onclick 属性连接，它会起作用，但如果我在 HTML 中删除它并尝试添加 eventListener('click', myFunc
我不知道为什么，但是当我点击“按钮”时什么也没有发生... 控制台中没有消息，没有错误。如何解决？ JS var bird = (function(){ let button = doc
我正在绘制一个方框网格，希望能够单击每个方框并使用 SocketIO 将带有其 ID 的通知发送到服务器 let boxes = document.querySelecto
我想是新手问题。 以下代码是我在文档就绪时调用的函数的一部分。它旨在在鼠标移动时永久返回当前鼠标位置的值。 正在发生的奇怪事情:在文档就绪时移动鼠标不会将任何内容记录到控制台。我知道 mouse_mo
我是 Flash 的新手，我似乎无法完成这个简单的操作。 (我正在使用 ActionScript 3.0) 我在我的编辑器中创建了一个输入文本框。实例名称是“测试”。在我的 Action 编辑器中，我
我有一个像 那些标签包含一些内容，我想打开/关闭它们，但仅使用纯 javascript。我已经尝试过使用 document.querySelectorAll
我是一名优秀的程序员,十分优秀！