ボタンが有効か無効かに関係なく、実行したいダブルクリックイベントを持つボタンがあります。これについて同様の質問をここに投稿しましたが、パラメーターを使用する無効なボタンから関数を実行する必要があります。他の質問で説明されているように、回避策this
を使用すると、要素ではなく要素に関する情報が得られます要素。<span>
<span>
<button>
どうすればこれを回避できますか?
ボタンが有効か無効かに関係なく、実行したいダブルクリックイベントを持つボタンがあります。これについて同様の質問をここに投稿しましたが、パラメーターを使用する無効なボタンから関数を実行する必要があります。他の質問で説明されているように、回避策this
を使用すると、要素ではなく要素に関する情報が得られます要素。<span>
<span>
<button>
どうすればこれを回避できますか?
まず、同じ ID を持つ 2 つの要素を持つことはできません。マークアップは次のようになります。
<button name='name_of_button' id='id_of_button1' ondblclick="runFunction( this );">Enabled Button</button>
<br>
<button name='name_of_button' id='id_of_button2' ondblclick="runFunction( this );" disabled>Disabled Button</button>
第 2 に、インライン JavaScript を使用することはお勧めできません。ただし、問題は次のように解決できます。
HTML:
<div class="wrapper">
<button name='name_of_button'>Enabled Button</button>
<div class="over"></div>
</div>
<div class="wrapper">
<button name='name_of_button' disabled="disabled">Disabled Button</button>
<div class="over"></div>
</div>
JS:
window.onload = function() {
var dblClicked = function() {
console.log(this.parentNode.childNodes[1].removeAttribute("disabled"));
}
var overlays = document.querySelectorAll(".wrapper .over");
for(var i=0; i<overlays.length; i++) {
var over = overlays[i];
over.addEventListener("dblclick", dblClicked);
}
}
要素が無効になっている場合、イベントをトリガーできません。これは、リスナーを親要素に追加しても、dblclick をリッスンできないことを意味します。そのため、ボタンの上にオーバーレイの透明な div を配置する必要があります。