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。

Answer 2

检查元素本身，而不是检查目标：

var div = document.getElementById("div1");
if(div.className == "divStyleClass1") {
    div.className = "divStyleClass2";
} else {
    div.className = "divStyleClass2";
}

Div内容的onClick事件

2 个答案: