0

質問

キャンバス要素があり、この上にテキスト入力のあるdivがあります。テキスト入力では、テキストを入力したり、カーソルを表示したり、クリックしたときにフォーカスが移動したりできません。

自分で問題を解決するために取った手順

これに類似した他の質問を調査した後、私は原因として以下を無視することができます：

  • z-divのインデックスがキャンバスよりも低い（入力ボックスはまだ表示されています）

  • ポジショニングを正しく設定していません（divをposition：absoluteに設定しました）

  • 選択の設定：cssになし（私はこれを持っていません）

コードが長すぎるため、すべてのコードを貼り付けることはできませんが、関連するセクションを投稿することはできます。

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;

私は完全に立ち往生していて、入力ボックスが機能しない理由がわかりません。あなたの助けてくれてありがとう:)

これで解決しました-しかし、解決策がエラーを引き起こす理由はまだ不明です

ええ、私のコードでたくさん遊んだ後、私は「問題」を見つけました。さまざまなUIボタンがクリックされたときにさまざまなものをアクティブにするmouseDownイベントリスナーがあります。

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（）がこの動作を引き起こす理由を誰かが知っていますか？

4

1 に答える 1

2

フォローアップの質問に答えるには:

e.preventDefault()イベントのデフォルトの動作をキャンセルします。他のイベントと比較すると意味があります。

  • click:要素の場合、ブラウザはデフォルトのように<a href="...">ナビゲートしません。
  • submit:要素の場合、ブラウザはデフォルトのように<form>フォームを送信しません。
  • mousedown: ブラウザーは、デフォルトのように、マウスダウン プロセス (マウス カーソルが現在ある要素にフォーカスを設定するなど)を実行しません。
于 2012-08-27T09:46:25.480 に答える