0

嗨，我正在做一个项目，遇到了一个奇怪的问题。

<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 的值（我确实得到了），但是对于同一次单击事件，我会收到多个警报代码正在工作，如果您愿意，可以自己尝试。有人可以向我解释代码中的问题或解决方案吗？提前感谢您的帮助

4

2 回答 2

1

这看起来像是事件传播的问题。

这是我最喜欢的参考站点，它为您提供了关于正在发生的事情的良好可视化。

简而言之，您的解决方法是做两件事。更改您onclick=的 say onclick=valuesOnClick，并在 valuesOnClick 中添加以下行：

element2.stopPropagation();

发生了什么

事件从最深的 div 冒泡到最顶层，直到它们被发送到<body>. 因此，当您在具有单击事件并嵌套在其他 div 中的 div 内单击时，所有 div 都会收到该事件。呼叫event.stopPropagation()将使冒泡停止。

但是，通过调用valuesOnClick(this)您的onclick事件，您实际上会丢失所有事件信息。相反，只需告诉 onclick 立即回调 valuesOnClick。我建议将element2函数内部重命名为event（只是为了清楚起见），然后您可以简单地使用this. （您可以使用 引用事件起源的最低元素event.target。）

于 2013-11-05T20:32:16.353 回答
0

首先，如果您使用的是jquery，那么您使用onclick属性而不是$（element）.click（）是什么？

我认为的问题是，您将 onclik 侦听器放在元素及其子项上..因此，如果您有一个<li>with 和<ul>child，并且每个<ul> <li>chlidren 都有 onclick，如果您单击最后一个<li>，那将触发他的onclik 和第一个的 onclik <li>（第一个提到的）

你需要停止传播

于 2013-11-05T20:37:15.443 回答