Div内容的onClick事件

时间:2016-12-08 20:50:41

标签: javascript css xpages

这是我简单的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,无论你在哪里和什么内部点击?

2 个答案:

答案 0 :(得分:5)

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

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

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";
}