这是我简单的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,无论你在哪里和什么内部点击?
答案 0 :(得分:5)
可能是使用事件的currentTarget
属性而不是target
。 currentTarget
包含事件处理程序附加到的节点。
如果这还不够,你可能会做这样的事情:
var target = thisEvent.target;
while(target != null) {
if(target.nodeName == "DIV") {
break;
}
target = target.parentNode;
}
然后 target
将包含最近的祖先节点div或null
。
答案 1 :(得分:0)
检查元素本身,而不是检查目标:
var div = document.getElementById("div1");
if(div.className == "divStyleClass1") {
div.className = "divStyleClass2";
} else {
div.className = "divStyleClass2";
}