我正在寻找一种简单而抽象的方法来克隆或重新调度DOM事件.我对克隆DOM节点不感兴趣.
我已经尝试了一下,阅读了DOM Events规范,但我没有找到明确的答案.
理想情况下,我正在寻找一些直截了当的东西:
handler = function(e){
document.getElementById("decoy").dispatchEvent(e)
}
document.getElementById("source").addEventListener("click", handler)
Run Code Online (Sandbox Code Playgroud)
当然,这个代码示例不起作用.有一个DOM例外,说明事件当前正在调度 - 显然.
我想避免手动创建新事件document.createEvent()
,初始化它们并调度它们.
这个用例有一个简单的解决方案吗?
HY,
这是我的测试页面的样子:
蓝色区域是父页面,绿色区域是运行ExtJS应用程序的IFrame(内部带有标签的简单视口).
如果站点在触摸设备(IPad,Android平板电脑等)上执行,则无法通过IFrame(绿色区域)上的"擦除"来滚动页面.必须擦除蓝色区域才能滚动页面.
这在ExtJS v4.2.1中已经正常工作(参见下面的链接).
试验场:
https://skaface.leo.uberspace.de/ScrollTest/Ext510/(使用ExtJS v5.1.1无法按预期工作)
https://skaface.leo.uberspace.de/ScrollTest/Ext421/(按预期工作,同样代码,但使用ExtJS v4.2.1)
测试代码:
父站点(index.html):
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" style="height: 100%;">
<head>
<title>Test</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
</head>
<body style="margin: 50px; background-color: blue;">
<iframe src="frame.html" width="100%" height="1400" style="border: none;"></iframe>
</body>
</html>
Run Code Online (Sandbox Code Playgroud)
IFrame(frame.html):
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" style="height: 100%;">
<head>
<title>Test</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<link rel="stylesheet" type="text/css" href="https://extjs.cachefly.net/ext/gpl/5.1.0/packages/ext-theme-neptune/build/resources/ext-theme-neptune-all-debug.css" …
Run Code Online (Sandbox Code Playgroud)