0

问题

我有一个画布元素，在此之上我有一个带有文本输入的 div。文本输入将不允许我输入文本或显示光标或单击时成为焦点。

我为自己解决问题而采取的步骤

在探索了与此类似的其他问题后，我可以忽略以下原因：

  • div的z-index低于画布（我仍然可以看到输入框）

  • 未正确设置定位（我已将 div 设置为 position: absolute）

  • 在 css 中设置 select: none （我没有这个）

我无法粘贴所有代码，因为它太长了，但我可以发布相关部分：

setBuildingTileSet 是包含相关文本输入的 div。

css

#setBuildingTileSet {
    height: 200px;
    left: 50%; 
    bottom: 50%;
    margin: -100px 0 0 -200px;
    position: absolute;
    width: 400px;
    opacity: 0.7;
    background: #000;
    z-index:1;
    padding: 20px;
}

html

<div id="container"></div>

<div id="setBuildingTileSet">
  <h1>Set Building TileSet </h1>
  <p><h2>Tileset name</h2></p>
  <input id="buildingTileSetName" type="text">
</div>

脚本

canvas = document.createElement('canvas');
$('#container').append(canvas);
$('#container canvas')[0].id =('canvas');
context = canvas.getContext("2d");

canvas.width = 800;
canvas.height = 600;

我完全卡住了，看不出为什么输入框不起作用。感谢您的帮助人们:)

现在解决了 - 但解决方案会导致错误的原因仍然未知

是的，经过大量使用我的代码后，我发现了“问题”。我有一个 mouseDown 事件侦听器，它在单击各种 UI 按钮时激活各种事物：

咖啡脚本

window.addEventListener 'mousedown', (e) =>
  button = e.which or e.button
  if button == 1 then @UIMouseDown(e) # Left mouse click
, false

UIMouseDown: (e) =>
  e.preventDefault() 
  ......etc

解决方案我发现当我删除 e.preventDefault() 时，文本框允许我输入文本:)

跟进问题 有谁知道为什么 e.preventDefault() 会导致这种行为？

4

1 回答 1

2

要回答您的后续问题：

e.preventDefault()取消事件的默认行为。如果将其与其他事件进行比较，这是有道理的：

  • click：对于<a href="...">元素，浏览器不会像默认那样导航。
  • submit：对于元素，浏览器不会像默认那样<form>提交表单。
  • mousedown: 浏览器不会像默认那样进行mousedown过程（例如将焦点设置在鼠标光标当前所在的元素上）。
于 2012-08-27T09:46:25.480 回答