javascript - 定义对要以 JSON 格式存储的元素的引用,而不使用元素的类或 id

标签 javascript jquery json dom reference

我想了解如何定义对页面中任何点击事件的target元素的引用,并以JSON形式存储强>(用于转移)。

解决方案不应依赖于使用目标的类或 ID。

具体来说,每当在页面中单击一个元素(可能没有classid)时,我会尝试定义对目标元素的引用,该元素可以以 JSON 格式存储用于传输,以便我可以在相同的页面中使用它。

<小时/>

用法示例:

这是一项测试,其中 2 个或更多用户在不同设备的同一界面中一起工作

  • 一款为 2 个用户提供相同页面的协作应用:

用户1:

<body>
    <div class="body-wrapper">
        <button>Click Here</button>
    </div>
    <div>
        <button>Click Me</button>
        <div>
             <button>Or Click Me</button>
        </div>
    </div>
</body>

用户2:(相同)

  • 当“Click Me”按钮是点击事件的目标时,监听器会返回对该按钮的某种引用,我可以通过网络发送该引用(这里需要 JSON 格式)

  • 结果:我可以在用户 2 的 DOM 中回显对该按钮的点击。

<小时/>

编辑:

正如答案评论中简要讨论的那样,事件委托(delegate)可用于处理动态生成的内容。 这是这个问题的答案与事件委托(delegate)的正确组合吗?

$(document).on("mouseup mousedown click mousemove", function(e) {
    var element = e.target.index("body *");
    socket.emit("event", element, e);
});

最佳答案

如果两个页面上的 DOM 相同,则可以使用 DOM 中元素的索引:

$("button").click(function() {
    var position = $(this).index("body *");
    // Send "position" to the server
    ...
}

在接收页面,您可以找到相应的按钮:

$("body *").eq(position);

进行您询问的事件委托(delegate)的正确方法是:

$(document).on("mouseup mousedown click mousemove", "button,checkbox,option", function(e) {
    var element = $(this).index("body *");
    socket.emit("event", element, e);
});

将元素类型列表更改为您需要捕获点击的所有元素类型。

关于javascript - 定义对要以 JSON 格式存储的元素的引用,而不使用元素的类或 id,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/23302629/

相关文章:

javascript - 这个子串有什么问题?

具有 ActiveRecord 输入的 JavaScript 函数

jquery - 我可以在 jQuery.inArray() 中使用正则表达式吗

javascript - 使用 jquery 在页面中添加基于 html 的类?

javascript - jqgrid 中的复选框选中或取消选中

javascript - 如何使用 addEventListener 触发页面的就绪状态 [无 jQuery]

javascript - jqgrid海量数据加载问题

json - 通过 Socket 流式传输一系列 JSON 字符串

java - com.google.gson.JsonSyntaxException : java. lang.IllegalStateException:预期为 BEGIN_OBJECT 但在第 1 行第 1 列路径 $

ajax - 406 Not Acceptable : Spring 3. 2 + JSON + AJAX