1

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

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

非常感谢。

编辑：我尝试了 onBlur 和 handleClick 混合结果。当我单击要选择的项目时，handleClick 方法被调用两次，选择它并立即取消选择它。

4

5 回答 5

4

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

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

代码可能类似于：

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

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

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

于 2009-06-24T14:52:00.017 回答
0

看看 onBlur

于 2009-06-24T14:49:08.790 回答
0

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

模糊是当焦点从您的元素中“丢失”时

于 2009-06-24T14:49:40.583 回答
0

伪代码：

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

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

body.onclick = function() {
    bodyOnClick();
};
于 2009-06-24T16:18:59.713 回答
0

没有 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 text，点击其他地方 → alert 背景文本。

于 2020-01-27T14:37:00.260 回答