javascript - HTMLでポインタのパススルーを防ぐには?

Question

次のようなテキストの順序付けられていないリストがあります。

<a href="http://google.com">
  <ul>
    <li>OK</li>
  </ul>
</a>

unorder リストは css を使用してテキストの上に絶対配置されます

a {
  position:relative;
}
ul {
  position: absolute;
  top:0;
  left:0;
}

次に、jQuery の .on 関数を使用して、クリックに反応するようにします。

$(document).on("click", "li", function() {
  alert('hello');
});

ただし、li をクリックすると、a のリンクもクリックされ、google.com に移動します。

li をクリックしたときにリンクが表示されないようにするにはどうすればよいですか?

score 4 · Accepted Answer

あなたがしなければならないことは、イベントがツリーに泡立つのを止めることです。stopPropagation() でそれを行うことができます

また、イベントをliに直接バインドできます。ページロードにない場合にのみ委任する必要があります。

$('li').on("click", function(e) {
    e.stopPropagation();
    alert('hello');
});

score 1 · Accepted Answer

1

$(document).on("click", "li", function(e) {
    e.preventDefault();
    alert('hello');
});

于 2013-09-04T10:36:07.650 に答える

5 に答える 5