我想了解如何定义对页面中任何点击事件的target元素的引用,并以JSON形式存储强>(用于转移)。
解决方案不应依赖于使用目标的类或 ID。
具体来说,每当在页面中单击一个元素(可能没有有class
或id
)时,我会尝试定义对目标元素的引用,该元素可以以 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/