如何通过jQuery onclick事件实现div链接包裹及点击分流

问题分析 #

你之前的代码逻辑有误：点击大div时才动态创建a标签，此时点击事件已经触发完成，新创建的a标签不会自动触发跳转，自然达不到效果。

解决方案 #

核心思路是利用事件冒泡与阻止冒泡：给父容器绑定跳转pageA的逻辑，给需要跳pageB的子元素单独绑定跳转逻辑，并阻止事件向上冒泡，避免触发父容器的跳转。

假设需要跳转pageB的小div id为special-div，代码示例如下：

// 点击大div任意区域（除了特殊小div）跳转至pageA
$("#big-div").on("click", function() {
  window.location.href = "pageA的地址";
});

// 点击特殊小div跳转至pageB，同时阻止事件冒泡
$("#big-div #special-div").on("click", function(e) {
  // 阻止事件传递给父元素，避免触发pageA的跳转
  e.stopPropagation();
  window.location.href = "pageB的地址";
});

补充说明 #

如果你的特殊小div有多个，或者是通过类名区分的，只需要把选择器换成对应的类选择器即可，比如：

$("#big-div .special-item").on("click", function(e) {
  e.stopPropagation();
  window.location.href = "pageB的地址";
});

内容的提问来源于stack exchange，提问作者Lixin Li