javascript - 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。