这是我的简单 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?
最佳答案
一种可能是使用事件的 currentTarget
属性而不是 target
。 currentTarget
包含事件处理程序附加到的节点。
如果这还不够,您也许可以执行以下操作:
var target = thisEvent.target;
while(target != null) {
if(target.nodeName == "DIV") {
break;
}
target = target.parentNode;
}
target
将包含最近的祖先节点,即 div 或 null
。
关于javascript - Div 内容的 onClick 事件,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/41048580/