0

私の質問は、同じコードを使用して他のイベントが機能するのに、なぜクリックイベントが機能しないのですか? 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が初めてで、何かが欠けているに違いありません。

4

1 に答える 1

1

「クリック」イベントを使用した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 が表示されません。

私が現在http://www.pricelearman.com/__dev/_js/main.jsで見つけることができるのは

// Show work navigation
function showWorkPane() {
    var workID = document.getElementById("workID");
    workID.addEventListener("mouseover", showWorkPaneHandler, false);
//                           ^^^^^^^^^
}

function showWorkPaneHandler(e) {
    e.preventDefault();
    var v = document.getElementById("workPane");
    v.style.display = "block";
}

clickイベントが効果を示さない理由は明らかです。束縛はありません。

于 2013-07-19T01:38:52.210 に答える