2009-06-24 15 views
1

这是我的问题,我正在设计一个网站,允许您通过使用onClick属性单击它来从列表中选择某个项目。我希望能够通过点击页面上的任何其他位置来取消选择该项目。我试着做<body onClick="deselect()">,但如果我点击页面上的任何地方,它会取消选择我的项目(即使我第一次点击选择它!)。有没有办法检测除特定区域以外的任何页面上的点击?

那么有没有一种方法来检测用户是否在页面上的其他地方点击了我的列表?

非常感谢。

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

回答

0

看的onblur

+0

我刚试过的onblur,它并不总是工作,当我尝试单击空白区域,但它似乎并没有松动重点 – 2009-06-24 14:57:58

+0

使用您的取消选择方法,您可以检查事件的来源,如果它的元素不取消选择该项目。这也应该工作 – 2009-06-24 15:07:33

3

的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

+0

只要确定我明白你的意思是正确的,你建议把onClick放在身体标记和其他地方,让他们调用handleClick函数? – 2009-06-24 15:09:01

0

伪代码:

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

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

body.onclick = function() { 
    bodyOnClick(); 
}; 
相关问题