OnClick событие для содержания Div

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> 

Я хочу изменить DIV styleClass на OnClick событие. И он отлично работает, пока я не нажму на любой элемент внутри DIV, например. на этикетке. Очевидно, thisEvent.target указывает на объект метки, и он терпит неудачу.

Итак, как исправить это, поэтому он изменяет класс стиля DIV независимо от того, где и что вы нажимаете внутри?

Answer 1

Существует также возможность использовать currentTarget свойство события, а не target. currentTarget содержит узел, к которому привязан обработчик событий.

---

Если этого не достаточно, вы могли бы быть в состоянии сделать что-то вроде этого:

var target = thisEvent.target; 
while(target != null) { 
    if(target.nodeName == "DIV") { 
    break; 
    } 
    target = target.parentNode; 
} 

target будет содержать ближайший узел предка, который является ДИВ или null.

Answer 2

Вместо проверки цели, проверить сам элемент:

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