Question

因此，我要创建一个按钮，每当您单击该按钮时，都会出现一个窗口，而当您单击该窗口以外的任何其他按钮时，窗口将消失。

我弹出了窗口，它确实将背景的不透明度更改为不可见，但是由于某种原因，每次我单击窗口底部时，它都会消失，当我在窗口外部单击时它不会消失。窗口，不透明度永远不会变回其原始形式。

String readvoice;
void setup() {
  //BT.begin(9600);
  Serial.begin(9600);
  pinMode(7, OUTPUT);
  digitalWrite(7, HIGH);
}
//-----------------------------------------------------------------------//
void loop() {
  while (Serial.available()) { //Check if there is an available byte to read
    delay(10); //Delay added to make thing stable
    char c = Serial.read(); //Conduct a serial read
    readvoice += c; //build the string- "forward", "reverse", "left" and "right"
  }
  if (readvoice.length() > 0) {
    Serial.println(readvoice);

    if (readvoice == "go")
    {
      //Serial.println("front");  //Writing values to motor driver
        digitalWrite(4,HIGH);
        digitalWrite(5,LOW);
        digitalWrite(7,LOW);
        digitalWrite(6,HIGH);
    }

    if (readvoice == "left")
    {
      //Serial.println("left");
        digitalWrite(4,HIGH);
        digitalWrite(5,LOW);
        digitalWrite(7,HIGH);
        digitalWrite(6,LOW);
    }
    if(readvoice == "right")
    {
      //Serial.println("right");
        digitalWrite(4,LOW);
        digitalWrite(5,HIGH);
        digitalWrite(7,LOW);
        digitalWrite(6,HIGH);
    }
    if (readvoice == "back")
    {
      //Serial.println("back");
        digitalWrite(4,LOW);
        digitalWrite(5,HIGH);
        digitalWrite(7,HIGH);
        digitalWrite(6,LOW);
    }
    if (readvoice == "stop")
    {
      //Serial.println("stop");
        digitalWrite(4,LOW);
        digitalWrite(5,LOW);
        digitalWrite(7,LOW);
        digitalWrite(6,LOW);
    }
    readvoice = "";
  }
}

对于JS来说还算是新手，对不起，如果有点杂乱

Answer 1

我认为您的window.onclick事件逻辑存在问题，如果不应执行文档代码上的target == modal，并且如果target！= modal则意味着target在您的框外。试试吧。

var modal = document.getElementById('modal-box');

$('.button-func').click(function(){
    $('.filter-box').animate({height:"toggle", opacity:"toggle"}, "slow");
    $('.header').animate({opacity:'.6'});
    $('.topnav').animate({opacity:'.6'});
    $('.add-filter').animate({opacity:'.6'});
    $('.main_home_box').animate({opacity:'.6'});
});

window.onclick = function(event) {
    if (event.target != modal) {
        modal.style.display = "none";
        $('.header').animate({opacity:'1'});
        $('.topnav').animate({opacity:'1'});
        $('.add-filter').animate({opacity:'1'});
        $('.main_home_box').animate({opacity:'1'});
    }
}

Answer 2

如piyush所建议，window.click应该是此功能。

function(event) {
if (event.target != modal) {
    modal.style.display = "none";
    $('.header').animate({opacity:'1'});
    $('.topnav').animate({opacity:'1'});
    $('.add-filter').animate({opacity:'1'});
    $('.main_home_box').animate({opacity:'1'});
}
}

仍然存在的问题是，当您单击任何地方时，事件目标都不是您所期望的。例如，当您单击模式窗口内的文本框时，事件目标是文本框而不是模式窗口。您必须更改逻辑以识别用户是在模态窗口内部还是外部单击。 event.target != modal是不准确的检查。您可以使用event.target.path属性来解决。希望这可以帮助。欢迎查询。

Javascript混淆和模式框

2 个答案: