javascript - インライン JavaScript onclick イベント

Question

これは私のhtmlコードです

<a href="#" onclick="return clickHandler()">Hit</a>

これは私のjavascriptファイルです

function clickHandler(evt) {
    var thisLink = (evt)?evt.target:Window.event.srcElement;
    alert(thisLink.innerHTML);
    return false;
}

しかし、ヒットリンクをクリックすると、リダイレクトされます。

score 26 · Accepted Answer

Defaultを防止したい場合は、イベントを渡す必要があります。

html:

<a href="#" onclick="runFunction(event)">Hit</a>

脚本：

function runFunction (evt) {
    evt.preventDefault();
    evt.stopPropagation();
}

score 9 · Accepted Answer

両方の非常に正しい答えを結び付けるために、何が起こったかは、あなたが書いた関数をインライン化したということですonclick="return runFunction();"

それを見ると、実際に行っていることは次のようになります。

var link = document.getElementById("myLink");

link.onclick = function () { runFunction(); };

問題が見えますか？

MyrunFunctionは、イベントオブジェクトがまったく渡されずに呼び出されています。...これはvar thisLink = (evt) ?false を返すことを意味し、oldIE モードで実行しようとすることを意味します。

と書くことonclick="runFunction"で、それは次のように言うのと同じです:

link.onclick = runFunction;

つまり、onclick イベントが発生すると runFunction が呼び出され、W3C 準拠のブラウザーではイベントオブジェクトが送信されます。

これが、そのソリューションが機能する理由です。

この混乱を避ける最善の方法は、JavaScript を JavaScript の内部で処理し、HTML を HTML の内部で処理することです。これにより、文字列がコードに変換される方法について心配する必要がなくなります。

ここで、これらすべてを機能させ、リダイレクトを防止するには、次のようにします。

W3C ブラウザー (イベントパラメーターを渡すもの) の場合:

function runFunction (evt) {

    // stops the default-action from happening
    // means you need to find another way to fire it, if you want to later
    evt.preventDefault();


    // stops higher-up elements from hearing about the event
    // like if you stop a submit button from "clicking", that doesn't stop the form
    // from submitting
    evt.stopPropagation();

    //the oldIE versions of both of these are
    event.cancelBubble = true;
    event.returnValue = false;    
}

score 0 · Accepted Answer

コードをchromeに接続すると、コンソールのエラーとして次のように表示されます。Uncaught TypeError：Undefinedのプロパティ'srcElement'を読み取れません

処理中にjavascriptが爆破された場合、JavaScriptが戻る機会がまったくないため、ブラウザーは例外の後にonclickハンドラーにあるものを無視する傾向があります。

爆撃されたので...アンカータグのデフォルトの動作。これは、hrefが行くと言っている場所にあなたを送り出すことです。

関数の内容をtry/catchブロックでラップしてみて、この種の問題が発生した場合にどうなるかを確認してください。

javascript - インライン JavaScript onclick イベント

3 に答える 3

Related

Reference