3

私がやろうとしているのは、ボタン自体よりも幅の広い画像ボタンをdivに配置することです。外側のdivがクリックされたときに、画像ボタンのonclick()関数を呼び出します。以下のhtmlコードから期待するのは、ボタン自体をクリックすると、「ボタンがクリックされた」だけを警告するはずです。外側のdivをクリックすると、最初に「divがクリックされました」、次に「ボタンがクリックされました」という警告が表示されます。問題は、divをクリックすると、「divがクリックされた」、「ボタンがクリックされた」、「divがクリックされた」の順に警告されることです。ボタンをクリックすると、「ボタンがクリックされました」、「divがクリックされました」、「ボタンがクリックされました」、「divがクリックされました」というアラートが表示されます。

私はここで私が欠けているものを見つけることができませんでした、何か助けはありますか?

<html>
<body>
    <div style="width: 200px; border: 1px solid red;" onclick="alert('div clicked');(document.getElementById('addButton')).click();">
        <input type="button" onclick="alert('button clicked');"
            id="addButton"/>
    </div>
</body>
</html>
4

4 に答える 4

2

あなたが見逃したのは、一部のイベントがドキュメント ツリーをバブルアップさせ、親要素のすべてのクリック ハンドラーをトリガーするという事実です。停止するには、イベント オブジェクトで stopPropagation を呼び出します。

<input type="button" onclick="event.stopPropagation ? event.stopPropagation() : (event.cancelBubble=true);alert('button clicked');"
        id="addButton"/>

(古い IE には stopPropagation がありません。event.cancelBubble=true を設定する必要があります)

于 2012-05-31T08:16:41.653 に答える
1

Internet Explorerでは、次のことができます。

myElement.click();

ただし、W3標準はもう少し複雑です。次のコードは、他のブラウザでも機能するはずです。

var evt = document.createEvent("HTMLEvents");
evt.initEvent("click", true, true);
myElement.dispatchEvent(evt);

この質問も参照してください:アンカータグへのクリックをシミュレートするにはどうすればよいですか?

于 2012-05-31T08:24:39.020 に答える
0

次のように、Javascriptからのイベントバブリングを回避する必要があります。

<html>
<body>
    <script type="text/javascript">
        function clickOnDiv(e){
            alert('Div clicked.');
            document.getElementById('addButton').click();
            e.preventDefault();
            return false;
        }

    function clickOnButton(e){
        e.preventDefault();

        // This line to prevent event bubbling
        e.stopPropagation() ? e.stopPropagation() : (e.cancelBubble=true);

        alert('Button clicked.');
        return false;
    }


    </script>
    <div id='maDiv' style="width: 200px; border: 1px solid red;">
        <input type="button" value="Click Me !" id="addButton"/>
    </div>
    <script>
        (function(){
            document.getElementById('addButton').onclick = clickOnButton;
            document.getElementById('maDiv').onclick = clickOnDiv;
        })();
    </script>
</body>
</html>

テスト済み..:)

于 2012-05-31T08:37:47.083 に答える
0

window.event.stopPropagation(); を使用します。お気に入り

<div style="width: 200px; border: 1px solid red;" onclick="alert('div clicked');(document.getElementById('addButton')).click();">
    <input type="button" value="X" onclick="alert('button clicked');window.event.stopPropagation();"
        id="addButton"/>
</div>
于 2012-05-31T08:17:55.850 に答える