2010-12-10 12 views
3

私はどこにもテーブルの行の内部マウスクリックに付属のJavaScriptアクションを持つテーブル行を持っている:最初のイベントを無視して2番目にスキップする方法は?

<tr onmousedown="someAction(this)"> 
    <td>cell 1</td> 
    <td>cell 2</td> 
    <td><a href="page2.html">cell 3</a></td> 
</tr> 

ユーザーがどこかの行にクリックした場合、私はJavascriptのアクションをしたい、someAction(本)、続かなければならない。しかし、ユーザーがpage2へのリンクをクリックすると、そのアクションは無視され、リンクが続いていきます。

残念ながら、アクションが最初に観察されていますが、リンクされたテキストの位置をクリックして削除するだけで十分です。言い換えれば、ユーザーは実際にはリンクをクリックせず、この場合はページ2に行くことができます。

リンク上のクリックに対してマウス操作を無効にするにはどうすればよいですか?

ありがとうございます!

... 
<script type="text/javascript" language="javascript"> 
//<![CDATA[ 
function stopEvent(ev) { 
    ev.stopPropagation(); 
} 
var links = document.getElementsByTagName('a'); 
for (var i = 0; i < links.length; i++) { 
    links[i].addEventListener("onmousedown", stopEvent, false); 
} 
//]]> 
</html> 

これが持ち得る:

更新:そうのような回答に基づいて、私は最終的には、提案として伝播を停止するようにイベントハンドラを登録HTMLの最後に次のJavaScriptを含ま簡単にドキュメントのonloadイベントに含まれていましたが、CDATAセクションはすでに他の理由で必要だったので、ここで必要なものを追加しました。

ご協力ありがとうございました! :)

答えて

5

あなたはjQueryのを使用していた場合、それは単純な(あなたが設定され、TR要素のid =「行」、および要素のid =「リンク」していると仮定)は次のようになります。

$('#row').click(someaction); 
$('#link').click(function(event){event.stopPropagation()}); 

することができますがhttp://jsfiddle.net/VDQMm/

jQueryを使用しない場合、ほとんど同じですが、まず各要素のハンドルを取得してから、addEventListenerメソッドを使用してイベントリスナーをアタッチします(行ハンドラをキャプチャする代わりにバブリングを使用するようにします)。最後のパラメータをfalseに設定)、同じ古いevent.stopPropagation()を実行します。

それはこのような何か(http://jsfiddle.net/VDQMm/2)のようになります。

var row = document.getElementById('row'); 
var link = document.getElementById('link'); 
row.addEventListener('click',alert('clicked row!'),false) 
link.addEventListener('click',function(event){event.stopPropagation()},false) 
+0

ありがとう!私はこのプロジェクトでjQueryを使用していないので、クローズドHTMLに含まれているJavaScriptを使用して、このタスクを達成しました(私の編集した質問を参照)。 – Trevor

+0

@Stephen、それをもっと分かりやすくしてくれてありがとう – unclenorton

関連する問題