0

基本的に、背景画像付きの大きなハイパーリンク要素があります。ユーザーがカーソルを合わせると、編集ボタンをクリックして入力フォームをポップアップ表示し、ハイパーリンクに関する内容を編集できるようにします。

たとえば、写真アルバムを撮ります。ユーザーのすべての写真アルバムをカバー写真と名前とともに表示します。フォト アルバムをクリックすると、ユーザーはそのアルバムのすべてのコンテンツを含む別のページに移動します。ただし、写真にカーソルを合わせると、アルバムの右下隅の上に編集ボタンが表示されます。このボタンをクリックすると、アルバムのタイトルを編集するための編集フォームが表示されます。

ただし、露出した編集ボタンをクリックすると、リンクもアクティブになり、そのフォト アルバムのコンテンツに転送されます。編集フォームは表示されますが、ページが自動的に別のビューに転送するので問題ありません。

これを解決するにはどうすればよいですか？ハイパーリンク ノードのすべての子ノードもハイパーリンクされていますか? もしそうなら、その 1 つの編集ボタンだけのハイパーリンク メカニズムを無効にするにはどうすればよいでしょうか?

4

2 に答える 2

0

イベント委譲を使用する jQuery ( $.on()):

<a href="http://www.yahoo.com/" id="outer">
    <p>Click in the blue to follow the link</p>
    <p id="inner">I am inner to the link</p>
</a>

var $outer = $('#outer');

$outer.on('click', '#inner', function prevent(e){
    console.log('Inner clicked.');
    e.preventDefault();
});

http://jsfiddle.net/userdude/fYPnu/2

そしてプレーンなJavascript：

var inner = document.getElementById('inner');

inner.addEventListener('click', function prevent(e){
    console.log('Inner clicked.');
    e.preventDefault();
});

http://jsfiddle.net/userdude/fYPnu/1

IE8< との下位互換性のために、 for.attachEvent()も検出する必要があることに注意してください。

于 2013-03-12T06:36:09.513 に答える