Question

这是我的问题，我正在设计一个网站，允许您通过使用onClick属性单击它来从列表中选择某个项目。我希望能够通过单击页面上的任何其他位置取消选择该项目。我尝试了<body onClick="deselect()">但是如果我点击页面上的任何地方它会取消选择我的项目（即使我第一次点击选择它！）。

那么有没有办法检测用户是否点击了页面上的其他位置，然后点击了我的列表？

非常感谢。

编辑：我试过onBlur并使用混合结果处理click。当我点击我想要选择的项目，选择它并立即取消选择时，handleClick方法会被调用两次。

Answer 1

onblur不会削减它，因为这不是标准的HTML输入元素。

您想要检查调用onclick事件时this引用的内容。如果它引用列表中的项目，则可以选择列表中的项目。如果它在列表之外引用，则取消选择列表中的所有项目。

代码可能类似于：

function handleClick(evt) {
   if (this.getAttribute('isListItem')) {
      // highlight
    } else {
      // remove highlighting
    }
    evt.preventDefault();
}

使用此代码取决于在HTML上具有属性以标识该元素是列表项。您还需要阻止事件传播到任何子元素。我不是100％确定是否有必要，但通常是因为事件传播到包含列表项的元素。

http://www.w3schools.com/jsref/jsref_onclick.asp

Answer 2

看看onBlur

Answer 3

http://www.w3schools.com/jsref/jsref_onblur.asp

模糊是焦点从元素中“丢失”

Answer 4

的伪代码：

var bodyOnClick = function(){}; // empty, does nothing

listItems.onclick = function(){
    /* Do stuff */
    bodyOnClick = deselect;
};

body.onclick = function() {
    bodyOnClick();
};

Answer 5

没有jQuery：

html：

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <link rel="stylesheet" href="./css.css">
    <title>Try Out</title>
  </head>
  <body>
    <ul>
      <li>Hello There</li>
      <li>General Kenobi</li>
    </ul>
    <script src="./js.js"></script>
  </body>
</html>

css（无关）：

body{
  background-color: black;
}

ul li {
  margin: 10px;
  border: 1px solid blue;
  color: green;
}

最后，在javascript中：

'use strict'

document.querySelector("html").onclick = handleBackgroundClick;

function handleBackgroundClick(event) {
  alert("In background / html");
}

for(let li of document.querySelectorAll("ul li"))
  li.onclick = handleLiClick;

function handleLiClick(event) {
  alert(this.innerHTML);
  event.stopPropagation();
}

点击html li→Alert li文本，单击其他地方→警报背景文本。

有没有办法检测页面上任何地方的点击，除了某个地区？

5 个答案: