jQuery CSS样式设置意外影响其他文档元素问题排查

你给所有<button>元素绑定了点击事件，当点击id为btn1的按钮时，这个通用按钮事件也会被触发——它会将页面上所有<p>元素的背景色设为黄色，这就导致你看到所有<p>都被修改，误以为是btn1的事件出了问题。

给第一个按钮添加专属id，仅给该按钮绑定全段落样式修改的事件，避免影响btn1的点击逻辑。

修改后的HTML代码 #

<body>
  <h2>This is a heading</h2>

  <p style="background-color:#ff0000">This is a paragraph.</p>
  <p style="background-color:#00ff00">This is a paragraph.</p>
  <p style="background-color:#0000ff">This is a paragraph.</p>

  <p>This is a paragraph.</p>

  <!-- 给第一个按钮添加专属id -->
  <button id="btnAll">Set background-color of p</button>

  <br><hr><br>

  <div id="div1">  
      <h2>This is a heading</h2>

      <p id="p1" style="background-color:#ff0000">This is a paragraph.</p>
      <p id="p2" style="background-color:#00ff00">This is a paragraph.</p>
      <p id="p3" style="background-color:#0000ff">This is a paragraph.</p>

      <p>This is a paragraph.</p>

      <button id="btn1">Set multiple styles for p</button>
  </div>
</body>

修改后的JavaScript代码 #

$(document).ready(function(){
  // 仅给id为btnAll的按钮绑定事件
  $("#btnAll").click(function(){
    $("p").css("background-color", "yellow");
  });

  $("#btn1").click(function(){
    $("#p1,#p2,#p3").css({"background-color": "yellow", "font-size": "200%"});
  });
});

如果不想修改按钮id，也可以在btn1的事件处理函数中阻止后续绑定的事件执行，添加event.stopImmediatePropagation()：

$("#btn1").click(function(event){
  event.stopImmediatePropagation();
  $("#p1,#p2,#p3").css({"background-color": "yellow", "font-size": "200%"});
});

但这种方式不如给按钮单独设置id直观，推荐优先使用第一种方案。

内容的提问来源于stack exchange，提问作者Giorgos Prokopi