1

ネストされたアンカー タグが不可能であるかのように、Javascript を使用してページ A への Div ボックス ハイパーリンクを設定し、Div ボックス内のテキストの単語をページ B へのハイパーリンクにすることはできますか?

次のJavascriptで作業してみました（ボックスまたはテキストのハイパーリンクでは機能しますが、両方では機能しません）：

<script type="text/javascript">

  // Content-Link Click Events

  $('.content-link-page-a').click(function(){
    window.location.href = "page-a.html";
  });

  $('.content-link-page-b').click(function(){
    window.location.href = "page-b.html";
  });

</script>

ここにいくつかのCSSがあります：

<style>
  .box {
    height: 50px;
    width: 100px;
    border: 1px solid #000;
  }
</style>

HTML は次のとおりです。

<div class="box content-link-page-a">
      <div id="username" class="content-link-page-b">UserName</div>
</div><!--/box-->
4

1 に答える 1

1

内側の DIV の周りから A を削除し、外側よりも大きな z-index を指定し、 event.stopPropagationを呼び出して内側のクリック イベントを処理して、外側の div へのイベントのバブリングを防ぐ必要があります。これは、タスクを解決するためのフィドルです。

内部ハンドラーのサンプル:

$('.content-link-page-b').click(function(e){
    alert("page-b.html");
    e.stopPropagation();
});

編集: 上記のコメントで、e.preventDefault() 呼び出しについて言及しました。これは、jQuery イベントのバブリングではなく、ネイティブ DOM 要素のハンドラーが防止されることを意味するためです。

于 2013-06-27T22:00:13.293 に答える