Here is my problem, I'm designing a website that allows you to select a certain item from a list by clicking on it using the onClick attribute. I would like to be able to deselect the item by clicking anywhere else on the page. I tried doing <body onClick="deselect()"> but then if I click anywhere on the page it deselect my item (even when I first click to select it!).
So is there a way to detect if the user clicked somewhere else on the page then on my list?
Thanks a lot.
Edit : I tried onBlur and handleClick with mixed results. The handleClick method get called twice when I click on the item I wish to select, selecting it and deselecting it immediately.
Here is my problem, I'm designing a website that allows you to select a certain item from a list by clicking on it using the onClick attribute. I would like to be able to deselect the item by clicking anywhere else on the page. I tried doing <body onClick="deselect()"> but then if I click anywhere on the page it deselect my item (even when I first click to select it!).
So is there a way to detect if the user clicked somewhere else on the page then on my list?
Thanks a lot.
Edit : I tried onBlur and handleClick with mixed results. The handleClick method get called twice when I click on the item I wish to select, selecting it and deselecting it immediately.
Share Improve this question edited Jun 24, 2009 at 15:49 Gab Royer asked Jun 24, 2009 at 14:46 Gab RoyerGab Royer 9,8768 gold badges42 silver badges61 bronze badges5 Answers
Reset to default 4onblur is not going to cut it as this isn't a standard HTML input element.
You want to inspect what this refers to when the onclick event is called. If it refers to an item in your list, then you can select the item in the list. If it refers outside of the list, then deselect all of the items in your list.
The code might look something like:
function handleClick(evt) {
if (this.getAttribute('isListItem')) {
// highlight
} else {
// remove highlighting
}
evt.preventDefault();
}
Using this code depends on having an attribute on the HTML to identify that the element is a list item. You also will want to prevent the event from propagating to any sub elements. I'm not 100% sure if this is necessary, but often because the event propagates to the element which contains your list items.
http://www.w3schools./jsref/jsref_onclick.asp
without 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 (irrelevant):
body{
background-color: black;
}
ul li {
margin: 10px;
border: 1px solid blue;
color: green;
}
finally, in 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();
}
click on the html li → alert li text, click elsewhere → alert background text.
look at onBlur
http://www.w3schools./jsref/jsref_onblur.asp
Blur is when the focus is 'lost' from your element
Pseudo-code:
var bodyOnClick = function(){}; // empty, does nothing
listItems.onclick = function(){
/* Do stuff */
bodyOnClick = deselect;
};
body.onclick = function() {
bodyOnClick();
};
发布者：admin，转转请注明出处：http://www.yc00.com/questions/1744587586a4582402.html
评论列表（0条）