如何将参数传递给使用EventListener的Web套接字事件内动态表生成的OnClick事件

问题描述

我已经在此站点上以及通过Internet进行搜索时看到了此问题，但觉得这种情况是独特的。我这里有几件事。首先是该页面接受Web套接字消息。接下来，我将使用onClick动态创建带有最后一个单元格的表。为了使事情更复杂，我试图将参数传递给onClick调用的函数。如果我不传递任何参数，它将正常工作。当有人单击图像时，我想将原始JSON传递给我的函数。当然，这是行不通的。 Web浏览器控制台将evt和p1显示为未定义。即使，我为点击操作添加了EventListener。我的猜测是我在EventListener中错误地传递了参数，但是发生的事情太多了，我不确定是什么引起了问题。有谁知道为什么我的clickMessageOne函数没有被调用？

window.addEventListener("load",init,false);
window.addEventListener("click",function (e) {clickMessageOne(e,p1)},false); // doesn't work

<script language="javascript" type="text/javascript">

    
    function init()
    {
        doConnect()
    }

    function doConnect()
    {
        websocket = new WebSocket("ws://192.168.1.198:8000/");
        websocket.onopen = function(evt) { onopen(evt) };
        websocket.onclose = function(evt) { onClose(evt) };
        websocket.onmessage = function(evt) { onMessage(evt) };
        websocket.onerror = function(evt) { onError(evt) };
    }

    function onopen(evt)
    {
        console.log("connected\n");
    }

    function onClose(evt)
    {
        console.log("disconnected\n");
    }

    function clickMessageOne(txt)
    {
        console.log("clickMessageOne");

        // txt should be original json
        console.log(txt);
    } 

    function onMessage(evt)
    {
        console.log("incomingJSON: " + evt.data + '\n');

        var recvObj = JSON.parse(evt.data);

        if (recvObj.code == "test")
        {
            var table = document.getElementById("incomingTable");
            var row = table.insertRow(1);

            // 7 columns
            var id = row.insertCell(0)
            var testOneCell = row.insertCell(1);
            var testTwoCell = row.insertCell(2);
            var testThreeCell = row.insertCell(3);
            var testFourCell = row.insertCell(4);
            var testFiveCell = row.insertCell(5);
            var testSixCell = row.insertCell(6);
            var testSevenCell = row.insertCell(7);
            var testEightCell = row.insertCell(8);

            id.innerHTML = ""
            testOneCell.innerHTML = "Incoming";
            testTwoCell.innerHTML = recvObj.number;
            testThreeCell.innerHTML = "";
            testFourCell.innerHTML = recvObj.time;
            testFiveCell.innerHTML = "";
            testSixCell.innerHTML = recvObj.textOne;
            testSevenCell.innerHTML = recvObj.textTwo;

            console.log(evt.data) // prints JSON correctly

            testEightCell.innerHTML = "<center><img src='test.png' onclick='clickMessageOne(evt.data)'></center>";
        } 
    }

    function onError(evt)
    {
        websocket.close();
    }

    window.addEventListener("load",false);
    window.addEventListener("click",false); // doesn't work

    function dodisconnect() {
        websocket.close();
    }

</script>

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）