私の質問は、同じコードを使用して他のイベントが機能するのに、なぜクリックイベントが機能しないのですか? http://www.pricelearman.com/__dev (2 つのアンダースコア)からの次のコード例を検討してください。
「クリック」イベントを使用したSquare 2の場合
function showWorkPane() {
var _workID = document.getElementById("workID");
_workID.addEventListener("click", showWorkPaneHandler, false);
}
function showWorkPaneHandler(e) {
var _workPane = document.getElementById("workPane");
e.preventDefault();
_workPane.style.display = "block";
}
リンク「Work」をクリックしても、workPane が表示されません。
「マウスオーバー」イベントを使用したスクエア 3 の場合
function showAboutPane() {
var aboutID = document.getElementById("aboutID");
aboutID.addEventListener("mouseover", showAboutPaneHandler, false);
}
function showAboutPaneHandler(e) {
e.preventDefault();
var v = document.getElementById("aboutPane");
v.style.display = "block";
}
リンク「ABOUT」をロールオーバーすると、予想どおり aboutPane ホバー効果が表示されます
「mousedown」イベントを使用した Square 4 の場合
function showConnectPane() {
var connectID = document.getElementById("connectID");
connectID.addEventListener("mousedown", showConnectPaneHandler, false);
}
function showConnectPaneHandler(e) {
e.preventDefault();
var v = document.getElementById("connectPane");
v.style.display = "block";
}
リンク「CONNECT」でマウスを押したままにすると、connectPane が期待どおりに表示されます
クリックイベントについて何が欠けていますか。他のマウスイベントと同じパターンに従わないことは、直感に反します。
e.preventDefault(); を使用して、リンクのデフォルト アクションからの干渉を排除しようとしています。
クリック イベントは、マウスダウン、マウスアップ、クリックという一連の単純なイベントであることは知っています。
このシーケンスをブロックする何かがありますか?
完全なコードは、http://www.pricelearman.com/__dev (2 つのアンダースコア) で確認できます。コードは最適ではないかもしれませんが、機能的には正しいです。つまり、バインドが完了し、関数が呼び出されるなどです。そうでなければ、上記のコードはまったく機能しません。
お時間と専門知識をお寄せいただきありがとうございます。これは私にとって厄介な質問です。それはとても基本的で単純なようです。私はJavaScriptが初めてで、何かが欠けているに違いありません。