gpt4 book ai didi

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

转载 作者:行者123 更新时间:2023-12-02 17:28:27 25 4
gpt4 key购买 nike

我想了解如何定义对页面中任何点击事件的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/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com