12

onclick イベントで 2 つの問題が発生しています。これらは多少似ているため、ここで両方について質問します。

初め：

divにチェックボックスがあります。input には onchange 関数があり、div には onclick 関数があります。

<div onclick="doSomething()">
     <input type="checkbox" onchange="doSomethingElse()" />
</div>

問題は、doSomething() と doSomethingElse() の両方が起動するチェックボックスをオン/オフにしたときです。これが起こらないようにする方法のアイデアはありますか? 私は onchange="doSomethingElse(event)" を実行しようとしましたが、 doSomethingElse(e) 関数で e.stopPropagation(); を実行しました。これはうまくいきませんでした。

2番：

divに画像があります。div には onclick 機能がありますが、画像にはありません。画像は、意図的に div よりも大きく、div の外にはみ出しています。

-----------------------
|        image        |
|   ---------------   |
|   |     div     |   |
|   |             |   |
|   ---------------   |
|                     |
-----------------------

ユーザーがdivボックスの境界内をクリックした場合にのみ、onclickを起動したい。ただし、div の外側にはみ出した画像の部分をクリックすると、onclick イベントも発生します... 何かアイデアはありますか?

最初の質問は、2 番目の質問よりも重要です。しかし、誰かが両方に答えることができれば、それは素晴らしいことです!

ご協力ありがとうございます、
マット

4

11 に答える 11

8

最初の質問: IE は をサポートしていません。stopPropagation()代わりに を使用してくださいe.cancelBubble = true。最初に関数チェックを実行して、使用するメソッドを見つけてください ( if (e.stopPropagation) {code})。

2 番目の質問: クリック イベントを処理する 2 番目の div を含めますか?

<div><img src="image.jpg"/></div>
<div style="position:absolute" onclick="doSomething();"></div>

次に、2番目のdivを正しく配置します

于 2009-06-12T07:26:19.117 に答える
5

2 番目の質問では、クリック イベントが発生したときのポインターの座標を取得し、それらを div の座標と比較できます。(実際の実装は、使用する js ライブラリによって異なります)

最初の質問では、イベントのバブリングを停止するには、次を使用する必要があります

event.cancelBubble = true;
if(event.stopPropagation) event.stopPropagation();
于 2009-06-12T08:46:06.930 に答える
1

伝播を停止する必要があります。これには jQuery を使用できます: Stopping Propagation。

于 2009-06-12T07:25:53.737 に答える
1

2番目：

以下も参照してください。

[img onmousedown="if (!clicking) alert('parent clicked') " ...]

[div onmousedown="clicking = true"
     onclick = " alert('child clicked") "
     onmouseup="clicking = false"
于 2010-10-10T11:29:45.450 に答える
1

最初の質問と非常によく似た問題がありました。しかし、代わりに <div> とチェックボックスがテーブルでした。私のNON WORKINGコードを見てください：

<table>
  <tr onClick="alert('I expect this alert when Cell_1 or Cell_2 are clicked but not Cell_3')">
    <td>Cell_1</td>
    <td>Cell_2</td>
    <td onClick="alert('I expect this alert only when Cell_3 is clicked')">Cell_3</td>
  </tr>
<table>

Cell_1 または Cell_2 をクリックすると、コードは期待どおりに動作しますが、Cell_3 をクリックすると、2 つのアラートが表示されたため、動作しません。

最初のものは次のとおりです。

「このアラートは、Cell_3 がクリックされた場合にのみ発生するはずです」

2つ目は次のとおりです。

Cell_1 または Cell_2 がクリックされたが、 Cell_3 がクリックされなかった場合に、このアラートが発生することを期待しています。

Google でそれを管理する方法を調べたところ、Quirksmodeに関するこの素晴らしい投稿が見つかりました。

簡単に言えば、このパズルは次のように解くことができます。

<table>
  <tr onClick="alert('I expect this alert when Cell_1 or Cell_2 are clicked but not Cell_3')">
    <td>Cell_1</td>
    <td>Cell_2</td>
    <td onClick="Cell_3Alert(event)">Cell_3</td>
  </tr>
<table>

そしてJavascript：

function Cell_3Alert(e) {
  alert('I expect this alert only when Cell_3 is clicked');

  if (!e) var e = window.event; 
  e.cancelBubble = true;
  if (e.stopPropagation) e.stopPropagation();
}

テストしたところ、FireFox 3.6+、IE6+、および Chrome で動作しました。

それが役に立てば幸い！

于 2014-11-13T19:06:05.583 に答える
0

最初に、e.preventBubble() も使用して、ハンドラーから false を返すことを試みます。

次に、クリックをキャプチャして、イベントのターゲットを確認できます。これは、e.target がイベントが発生した正確な要素を返す jQuery のようなイベントを正規化するライブラリを使用する場合に最も簡単です。別のオプションは、画像ではなく、画像をオーバーフローさせているコンテナーにクリックハンドラーを配置することです。

于 2009-06-12T07:26:05.280 に答える
0

バブリングのキャプチャを停止するのと同様に、または代わりに、各イベント関数には、正しい要素がクリックされたことを確認するコードが必要です。event.targetevent.scrElement

2 番目の質問では、画像の特定の領域をクリックするために提供される HTML である画像マップを使用することをお勧めします。

于 2009-06-12T08:20:50.047 に答える
0

私も同じ問題を抱えていました。私にとっては、サイドバーメニュー用の別のスパンタグのスパンタグでした。サブカテゴリは、クリックされるたびに開くはずでしたが、コンテンツがクリックされたときではありませんでした。しかし、「クリック」イベントのプロパティを調べると、解決策を見つけたと思い、次のように書きました。

function sidebar_click(event)
{
    if (event.target == event.currentTarget)
        event.currentTarget.classList.toggle('open');
}

ターゲットが currentTarget の場合にのみ実行されます。Target はクリックしたアイテムで、currentTarget はイベント ハンドラーがリンクされているアイテムです。同じであれば実行し、そうでなければ実行しません。

お役に立てれば。

于 2016-04-15T07:16:01.020 に答える