Question

问题

我有一个canvas元素，在上面我有一个带有文本输入的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>

的javaScript

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

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

我完全陷入困境，无法理解为什么输入框无效。感谢您的帮助：）

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

是的，经过大量玩弄我的代码后，我发现了'问题'。我有一个mouseDown事件监听器，当点击各种UI按钮时，它会激活各种各样的东西：

的CoffeeScript

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（）会导致此行为？

Answer 1

回答您的后续问题：

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

click：对于<a href="...">元素，浏览器不会像默认情况下那样导航。
submit：对于<form>元素，浏览器不会像默认情况下那样提交表单。
mousedown：浏览器不会通过mousedown进程（例如将焦点设置在鼠标光标当前所在的元素上）就像默认情况下那样。

输入类型文本不允许输入或焦点

1 个答案: