4

テーブルの行タグがonclick()ハンドラーで装飾されているテーブルがあります。行がどこかでクリックされると、別のページが読み込まれます。行の要素の1つに、別のページにつながるアンカータグがあります。

望ましい動作は、リンクをクリックすると「delete.html」が読み込まれることです。行の他の場所をクリックすると、「edit.html」が読み込まれます。

問題は、 （ユーザーによると）リンクとの両方が同時にonclick()起動され、バックエンドコードに問題が発生する場合があることです。彼らはダブルクリックしていないことを誓います。

JavaScriptイベントのバブリング、処理、およびこの奇妙な問題をどこから始めればよいかさえわからないので、助けを求めています。レンダリングされたページの一部を次に示します。リンクが埋め込まれ、スクリプトタグが関連付けられた行が表示されています。任意の提案を歓迎します：

<tr id="tableRow_3339_0" class="odd">
   <td class="l"></td>
   <td>PENDING</td>
   <td>Yabba Dabba Doo</td>
   <td>Fred Flintstone</td>
   <td>
     <a href="/delete.html?requestId=3339">
       <div class="deleteButtonIcon"></div>
     </a>
  </td>
  <td class="r"></td>
</tr>
<script type="text/javascript">document.getElementById("tableRow_3339_0").onclick = function(event) { window.location = '//edit.html?requestId=3339'; };</script>
4

2 に答える 2

6

イベントバブリングはこのように機能します。要素 A が要素 B 内に含まれている場合、要素 A がクリックされると、要素 A に対してクリック イベントが発生し、要素 B に対してバブルアップして発生します。これは、技術的には両方の要素をクリックしているために発生します。

したがって、基本的にリンクをクリックすると、クリックイベントがtr要素にバブルアップします。リンクのクリックから次のページが読み込まれる速さによっては、tr クリック イベントが発生する場合があります。

イベント ハンドラー内でバブリングを停止できます:インラインの onclick 属性を使用してイベントの伝播を停止するにはどうすればよいですか?

于 2012-11-27T23:06:06.500 に答える
0

JavaScript イベントを処理するには、主に 3 つの方法があります。

  1. イベント ハンドラ
  2. イベントリスナー
  3. イベント委任

イベント ハンドラーはonclick、HTML に直接配置されるようなものです。イベント リスナーは addEventListener と呼ばれるメソッドを使用して要素にリスナーをアタッチし、ブラウザーにイベントをリッスンさせます。あなたの質問によると、イベント委任 (バブリングを含む) により、子要素で発生するイベントを親要素でリッスンできます。

基本的に、ここで #1 と #3 をブレンドしようとしています。3 つのいずれかを使用できますが、実際には #2 の方が簡単な場合があります。

次のようなことを試してください：

rows = document.getElementsByTagName("tr");
rows.('click', function(event) {
 window.location = '//edit.html?requestId=3339'; 
};

3 つの方法をよりよく理解する必要がある場合は、 JavaScript イベントに関するこの記事で詳しく説明します。（免責事項：私が書きました）。

于 2016-03-24T18:35:19.110 に答える