您好我正在开展一个项目并遇到一个奇怪的问题。
<html>
<head><script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script></head>
<body>
<div id="tree" style="height:500px;width:300px;float:left;">
<script>
var JSONObject= {"className":"com.alta.entity.Person","key":"this","modifier":1,"value":"Person [id\u003d1001, firstName\u003dShiju]","level":0,"elementArray":[
{"className":"java.lang.Long","key":"id","modifier":17,"value":"1001","level":1,"elementArray":[]},{"className":"java.lang.String","key":"firstName","modifier":17,"value":"Shiju","level":2,"elementArray":[{"className":"java.lang.Character","key":"0","modifier":17,"value":"S","level":3,"elementArray":[]},{"className":"java.lang.Character","key":"1","modifier":17,"value":"h","level":4,"elementArray":[]},{"className":"java.lang.Character","key":"2","modifier":17,"value":"i","level":5,"elementArray":[]},{"className":"java.lang.Character","key":"3","modifier":17,"value":"j","level":6,"elementArray":[]},{"className":"java.lang.Character","key":"4","modifier":17,"value":"u","level":7,"elementArray":[]}]},{"className":"java.util.ArrayList","key":"addressArray","modifier":1,"value":"[com.alta.entity.Address@10045eb]","level":3,"elementArray":[{"className":"com.alta.entity.Address","key":"0","modifier":1,"value":"com.alta.entity.Address@10045eb","level":4,"elementArray":[{"className":"java.lang.Long","key":"id","modifier":17,"value":"1001","level":5,"elementArray":[]},{"className":"java.lang.String","key":"addressLine","modifier":17,"value":"This is addredss Line","level":6,"elementArray":[{"className":"java.lang.Character","key":"0","modifier":17,"value":"T","level":7,"elementArray":[]},{"className":"java.lang.Character","key":"1","modifier":17,"value":"h","level":8,"elementArray":[]},{"className":"java.lang.Character","key":"2","modifier":17,"value":"i","level":9,"elementArray":[]},{"className":"java.lang.Character","key":"3","modifier":17,"value":"s","level":10,"elementArray":[]}]}]}]}]};
var elementList= JSONObject.elementArray;
var elementContainer=document.createElement('ul');
var objectArray = new Array();
function createObjectArray(elementClassName,elementValue,elementId,elementModifier){
obj=new Object();
obj.id = elementId;
obj.className = elementClassName;
obj.value = elementValue;
obj.modifier = elementModifier;
objectArray.push(obj);
}
function valuesOnClick(element2){
/*var element2ID=element2.id;
var reqID = element2ID[0];*/
alert("callllllllllllllll -- > "+$(event.target).text());
//document.getElementById('Class').innerHTML= element2.id.toString();
/*var id = $(element2).attr('id');
for (var i=0;objectArray.length;i++){
if (id===objectArray[i].id){
document.getElementById('Class').innerHTML= objectArray[i].className;
document.getElementById('Value').innerHTML= objectArray[i].value;
}
}*/
}
function generateGuid()
{
var result, i, j;
result = '';
for(j=0; j<32; j++)
{
if( j == 8 || j == 12|| j == 16|| j == 20)
result = result + '-';
i = Math.floor(Math.random()*16).toString(16).toUpperCase();
result = result + i;
}
return result
}
//document.getElementById('tree').appendChild(test(JSONObject));
/*function load(){
alert("Looading ...........");
var element = document.getElementById('tree');
console.log(createUls(JSONObject));
element.appendChild(createUls(JSONObject));
}
var id = 1;
function createUls(element){
var ul = document.createElement('ul');
var exLi = document.createElement('li');
exLi.innerHTML = element.key;
ul.appendChild(exLi);
var elementArray = element.elementArray;
for(var i=0; i<elementArray.length; i++){
var cElement = elementArray[i];
var li = document.createElement('li');
li.innerHTML = cElement.key;
if(cElement.elementArray.length > 0){
li.appendChild(createUls(cElement));
}
ul.appendChild(li);
}
return ul;
}*/
function createObjectGraph(element){
var ul = document.createElement('ul');
var li = document.createElement('li');
var tempID = generateGuid();
li.setAttribute('id',tempID);
li.setAttribute('onclick','valuesOnClick()');
li.innerHTML = element.key;
ul.appendChild(li);
createObjectArray(element.className,element.value,tempID,element.modifier);
var elementArray = element.elementArray;
var ul2 = document.createElement('ul');
li.appendChild(createTree(elementArray,ul2));
return ul;
}
function createTree(list,container){
if(list){
for(var i=0;i<list.length;i++){
var li = document.createElement('li');
var tempID = generateGuid();
li.setAttribute('id',tempID);
li.setAttribute('onclick','valuesOnClick()');
li.innerHTML = list[i].key;
if (list[i].elementArray.length > 0) {
var ul = document.createElement('ul');
li.appendChild(ul);
var innerElement=list[i].elementArray;
createTree(innerElement, ul);
}
container.appendChild(li);
}
}
return container;
}
document.getElementById('tree').appendChild(createObjectGraph(JSONObject));
</script>
</div>
<div id="content" style="height:200px;width:400px;float:left;">
Input: <input align ="justify" type="text" id="Class" style="width:400px;"><br>
Class: <input align ="justify" type="text" id="Class" style="width:400px;"><br>
Value: <input align ="center" type="text" id="Value" style="width:400px;"><br>
</div>
<br/>
<hr/>
<ul>
<li onclick= 'valuesOnClick(this)'>thisss
<ul>
<li onclick= 'valuesOnClick(this)'>id</li>
<li onclick= 'valuesOnClick(this)'>firstName
<ul>
<li value ="Value" onclick= 'valuesOnClick(this)'>0</li>
<li onclick= 'valuesOnClick(this)'>1</li>
<li onclick= 'valuesOnClick(this)'>2</li>
<li onclick= 'valuesOnClick(this)'>3</li>
<li onclick= 'valuesOnClick(this)'>4</li>
<li onclick= 'valuesOnClick(this)'>5</li>
</ul>
</li>
<li onclick= 'valuesOnClick(this)'>addressArray
<ul>
<li onclick= 'valuesOnClick(this)'>0</li>
<li onclick= 'valuesOnClick(this)'>id</li>
<li onclick= 'valuesOnClick(this)'>addressLine
<ul>
<li onclick= 'valuesOnClick(this)'>0</li>
<li onclick= 'valuesOnClick(this)'>1</li>
<li onclick= 'valuesOnClick(this)'>2</li>
<li onclick= 'valuesOnClick(this)'>3</li>
<li onclick= 'valuesOnClick(this)'>4</li>
<li onclick= 'valuesOnClick(this)'>5</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</body>
当我运行这段代码时，我打算获得单个li的值（我确实得到了）但是我得到了同一个事件点击的多个警报 代码正在运行，如果您需要，您可以自己尝试。有人可以解释一下代码中的问题或解决方案。感谢您的帮助
答案 0 :(得分：1)
这看起来像是事件传播的问题。
Here是我最喜欢的参考网站，可以很好地展示您正在发生的事情。
简而言之，您的解决方法是做两件事。将您的onclick=更改为onclick=valuesOnClick，并在valuesOnClick中添加以下行：
element2.stopPropagation();
事件从最深的div到最顶层，直到它们被发送到<body>。因此，当您在具有click事件并且嵌套在其他div中的div内部单击时，所有div都将获得该事件。拨打event.stopPropagation()会使冒泡停止。
但是，通过使用valuesOnClick(this)事件调用onclick，您实际上会丢失所有事件信息。相反，只需告诉onclick立即回调valuesOnClick。我建议将函数内的element2重命名为event（仅为了清晰起见），然后您可以使用this简单地引用调用元素。 （您可以使用event.target引用事件源自的最低元素。）
答案 1 :(得分：0)
首先，如果你正在使用jquery，你使用onclick attribt而不是$（element）.click（）？
我认为问题在于，你正在把听众放在其中的元素上，如果你有一个<li>和<ul>孩子，每个{{1} } <ul> chlidren onclick，如果你单击最后一个<li>之一，那将触发他的onclik和第一个<li>（首先提到的）
您需要停止传播