多个警报，而不是一个针对单击事件
Multiple alerts instead of one for single click event
嗨，我正在做一个项目，遇到了一个奇怪的问题。
<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 的值（我确实得到了），但我在同一次单击事件时收到多个警报代码正在工作，如果您愿意，可以自己尝试。有人可以向我解释代码中的问题或解决方案吗？提前感谢您的帮助
这看起来像是事件传播的问题。
这是我最喜欢的参考网站，它为您提供了有关正在发生的事情的良好可视化。
简而言之，您的解决方法是做两件事。 将onclick=更改为 onclick=valuesOnClick ，并在 valuesOnClick 中添加以下行：
element2.stopPropagation();
发生了什么事情
事件从最深的div到最顶层冒泡，直到它们被发送到<body>。 因此，当您在具有单击事件并嵌套在其他div 中的div 内单击时，所有div 都将获得该事件。 呼叫event.stopPropagation()将使冒泡停止。
但是，通过调用valuesOnClick(this)您的onclick事件，您实际上会丢失所有事件信息。 相反，只需告诉 onclick 立即回调 valuesOnClick。 我建议将函数内的element2重命名为event（只是为了清楚起见），然后您可以简单地使用 this 引用调用元素。 （您可以引用事件起源的最低元素 event.target 。
首先，如果你使用的是jquery，你用的是onclick attributo而不是$（element）.click（）？
我认为问题是你把onclik听众放在元素上，放在它的孩子身上。因此，如果您有一个<li>和<ul>孩子，并且每个<ul> <li> chlidren 都有 onclick，如果您单击最后一个<li>之一，这将触发他的 onclik 和第一个<li>的 onclik（第一个提到的）
您需要停止传播
相关文章：
- 使用clickToggle并在单击另一个元素时关闭元素
- 单击按钮后如何逐个调用分区，上一个分区将隐藏
- 单击更改图标并通过javascript添加一个css类
- 通过单击动态加载的表中同一行的另一个字段来更新一行的字段
- 如何创建一个“;表单弹出框“;在chrome中右键单击时位于突出显示的单词上方
- 复选框:一次只允许单击一个复选框
- 如何创建一个表并在单击按钮时插入此标签和文本字段
- 单击转盘按钮后重定向到另一个页面
- 如何在单击按钮时显示一个分区，同时隐藏另一个分区
- 在单击下一个按钮之前，在JavaScript代码中添加5秒的延迟
- 一个按钮中的两个onClick功能，并希望一个接一个地发生一个单击功能
- 为什么在模糊事件处理程序中添加setTimeout会修复“;掩蔽”;另一个单击处理程序的
- jQuery复选框和span共享一个单击事件
- 通过它查询谷歌地图上已经存在的标记's的lat和long，并以编程方式在其上触发一个单击事件
- 在开发元素被确认后，在开发元素下方保留一个单击按钮
- 一个.单击函数在 jQuery 中不起作用
- $('html'）.单击一个又一个单击事件
- 如何仅在前一个单击完成时执行下一个单击
- 如何将单击事件绑定到另一个单击元素中的元素
- 单击另一个单击事件中的定位标记
