Div内容的onClick事件

Question

这是我简单的xPage:

<?xml version="1.0" encoding="UTF-8"?>
<xp:view xmlns:xp="http://www.ibm.com/xsp/core">
    <xp:div
        style="border-color:rgb(255,0,0);border-style:solid;border-width:thin"
        id="div1" styleClass="divStyleClass1">
        <xp:label value="Label" id="label1" styleClass="labelStyleClass">
        </xp:label>
        <xp:eventHandler event="onclick" submit="false">
            <xp:this.script><![CDATA[alert(thisEvent.target.className);
if(thisEvent.target.className=="divStyleClass1"){
    thisEvent.target.className="divStyleClass2";
} else {
    thisEvent.target.className="divStyleClass1";
}]]></xp:this.script>
        </xp:eventHandler>
    </xp:div>
</xp:view>

我想通过onClick事件更改DIV styleClass.它工作正常,直到我点击DIV内的任何元素,例如在标签上.显然thisEvent.target指向标签对象,它失败了.

那么如何修复它,以便它改变DIV styleClass,无论你在哪里和什么内部点击？

Answer 1

可能性是使用currentTarget事件的属性而不是target.currentTarget包含事件处理程序附加到的节点.

如果这还不够,你可能会做这样的事情:

var target = thisEvent.target;
while(target != null) {
  if(target.nodeName == "DIV") {
    break;
  }
  target = target.parentNode;
}

target然后将包含最近的祖先节点,即div或null.