javascript - if 语句在条件为假时执行

Question

右键单击蓝色部分将显示一个 div 元素，但如果从光标到右端和底端的高度和宽度小于 100 像素，则 div 不应显示在那里。但它正在显示。在 JavaScript 中parent.addEventListener，我创建了一个 if 语句来执行此操作，并且提供的条件为假，因为我也在控制台中记录了它是否显示为假，但 if 语句中的代码已被执行。

var parent = document.querySelector(".parent"),
  child = document.querySelector(".child"),
  listItem = document.querySelectorAll("li"),
  result = document.querySelector(".result");
parent.addEventListener("contextmenu", function(e) {
  if ((300 >= (e.offsetX + child.offsetWidth)) && (300 >= (e.offsetY + child.offsetHeight))) {
    child.style.top = (e.offsetY - 10) + "px";
    child.style.left = (e.offsetX - 10) + "px";
    child.style.display = "block";
    console.log(300 > (e.offsetX + child.offsetWidth));
    console.log(300 > (e.offsetY + child.offsetHeight));
  }
  console.log(
    "e.offsetX: " + e.offsetX + "\n" +
    "e.offsetY: " + e.offsetY + "\n" +
    "child.offsetWidth: " + child.offsetWidth + "\n" +
    "child.offsetHeight: " + child.offsetHeight + "\n"
  )
  e.preventDefault();
})
parent.addEventListener("click", function(e) {
  child.style.display = "none";
})
for (let i = 0; i < listItem.length; i++) {
  listItem[i].addEventListener("click", function(e) {
    result.innerText = this.innerText;
  })
}

* {
  margin: 0;
  padding: 0;
}

.parent {
  background-color: blue;
  width: 300px;
  height: 300px;
  position: relative;
}

.child {
  display: none;
  box-sizing: border-box;
  position: absolute;
  right: inherit;
  top: auto;
  width: 100px;
  height: 100px;
  margin: 10px;
  padding: 0.5rem;
  background-color: rgba(128, 161, 51, 0.6);
  border-radius: 4px;
}

ul {
  list-style-type: none;
  color: white;
}

li {
  background-color: rgba(128, 161, 51, 0.7);
  margin: 0.25rem 0rem;
  padding: 0rem 0.5rem;
  border-radius: 4px;
}

li:hover {
  cursor: pointer;
}

<p>Right click or long press on the blue section, then select any option.</p>
<div class="parent">
  <div class="child">
    <ul>
      <li>Home</li>
      <li>About Me</li>
      <li>Contact</li>
    </ul>
  </div>
</div>
<div class="result"></div>

标签： javascripthtmlcss

Answer 1

这里的部分问题是您的代码正在检查偏移量 300，而不是问题文本中描述的 100 - 这意味着不可能触发错误条件（因为元素是 300px 正方形。）

更改代码以检查 100px 的偏移量反而表明它主要工作......但显示菜单的测试也会与菜单的offsetWidthand进行比较offsetHeight，当元素为 时，两者都变为零display:none，这会导致您的计算失败。

最后，您添加的是offsetHeight而不是按预期减去它（这似乎起作用的唯一原因是您添加的内容实际上为零。）

这是校正数学的结果，并使用visibility而不是display来控制是否显示子项（visibility保持元素的原始大小不变）：

var parent = document.querySelector(".parent"),
  child = document.querySelector(".child"),
  listItem = document.querySelectorAll("li"),
  result = document.querySelector(".result");
  
parent.addEventListener("contextmenu", function(e) {
  if ((100 >= (e.offsetX - child.offsetWidth)) && (100 >= (e.offsetY - child.offsetHeight))) {
    child.style.top = (e.offsetY - 10) + "px";
    child.style.left = (e.offsetX - 10) + "px";
    child.style.visibility = "visible";
    console.log('true')
  } else {
    child.style.visibility = "hidden";  // <-- If you want to make the menu disappear when clicking in an invalid location
    console.log('false')
  }
  e.preventDefault();
})
parent.addEventListener("click", function(e) {
  child.style.display = "none";
})
for (let i = 0; i < listItem.length; i++) {
  listItem[i].addEventListener("click", function(e) {
    result.innerText = this.innerText;
  })
}

* {
  margin: 0;
  padding: 0;
}

.parent {
  background-color: blue;
  width: 300px;
  height: 300px;
  position: relative;
}

.child {
  visibility: hidden;
  box-sizing: border-box;
  position: absolute;
  right: inherit;
  top: auto;
  width: 100px;
  height: 100px;
  margin: 10px;
  padding: 0.5rem;
  background-color: rgba(128, 161, 51, 0.6);
  border-radius: 4px;
}

ul {
  list-style-type: none;
  color: white;
}

li {
  background-color: rgba(128, 161, 51, 0.7);
  margin: 0.25rem 0rem;
  padding: 0rem 0.5rem;
  border-radius: 4px;
}

li:hover {
  cursor: pointer;
}

<p>Right click or long press on the blue section, then select any option.</p>
<div class="parent">
  <div class="child">
    <ul>
      <li>Home</li>
      <li>About Me</li>
      <li>Contact</li>
    </ul>
  </div>
</div>
<div class="result"></div>