Question

我正在建立一个个人网站。我想做到这一点，使背景突然改变主题从黑暗到光明，反之亦然。它工作，但我不希望它切换主题，如果用户点击文本，只有网页的背景例如，如果我点击底部的文本它改变了CSS，但它只应该这样做，如果你点击白色背景。这是my code（主要是checkout js / main.js，switchTheme函数和index.html）和website本身。

Answer 1

您的目标是容器类。无论何时单击div（或其中的任何内容），该事件都将触发。如果$（＆＃39; this＆＃39;）选择器===＆＃39; p＆＃39;请尝试停止点击事件中的事件传播。或者你正在使用的任何课程。

另外 - 对13老板来说也不错！

$( document ).click(function( event ) {
  //  if statement here
    event.stopPropagation();
  // else the regular behavior
});

Answer 2

感谢大家的帮助！几乎放弃了并且想要使用按钮来切换它。你知道的越多！因为这是我的问题的答案：e.stopPropagation（）

Answer 3

添加测试以查看所点击元素的ID是否实际上是容器。

function switchTheme( event ) {

  if ( event.target.id === 'container' ) { //the container was clicked, and not a text node

      if (dark) {
        $("#container").css("background-color", "rgba(255,255,255,0.7);");
        $("#container").css("color", "black");
        dark = false;
      } else {
        $("#container").css("background-color", "rgba(0,0,0,0.7);");
        $("#container").css("color", "white");
        dark = true;
      }
  }
}

Answer 4

尝试设置以下内容：

$("#container").on("click", "div", function(e){
  e.stopPropagation();
});

Answer 5

怎么样

$("#container").on("click", "div", function(event){
  event.stopPropagation();
  switchTheme();
});

使onclick只影响元素，而不影响它的孩子

5 个答案: