我有以下内容:
<textarea id="text"></textarea>
<textarea id="simulator"></textarea>
<br/>
<div onclick="simulate()">Simulate</div>
keyslog = [];
$('#text').bind('keyup keydown keypress mousedown mouseup', function(e){
keyslog.push(e);
}
function simulate(){
for(var i=0;i<keyslog.length;i++){
var e = keyslog[i];
// how to fire "e" event again on #simulator?
}
}
我失败的尝试是:
document.getElementById('simulator').dispatchEvent(e);
和
$('#simulator').trigger(e);
问题是如何根据已经存储的事件对象触发事件。它可以是鼠标或键盘事件。
附言该示例是关于使用鼠标在光标更改/突出显示的支持下运行按下的键的回放。
最佳答案
我想我已经很接近你想要的了。在 jsbin 上测试它:http://jsbin.com/epaqej/18 或复制代码:
JavaScript 代码:
jQuery(function() {
var keyslog = [], ctime = [], counter = 0, when = [], $simulator = $('#simulator'), $log = $('#log');
$('#text').bind('keyup keydown keypress mousedown mouseup', function(e){
when[counter] = Date.now(); // get the current time
// delay_time is 0 for the first element
// and the difference between the time past since the last event and the current event otherwise
e.delay_time = (counter) ? (when[counter] - when[counter-1]) : 0;
keyslog.push(e);
counter++;
});
$('#simulator').bind('keyup keydown keypress mousedown mouseup', function (e) {
// console.log(e.type + ' called on #simulator');
});
function simulate(current) {
var e, text = '', char_code, simtext = '';
// console.log('executing event ' + current + ' of ' + keyslog.length);
if (current < keyslog.length) {
e = keyslog[current];
setTimeout(function() {
char_code = e.which || e.charCode || e.keyCode;
text += e.type + ' called after ' + e.delay_time + '<br />';
if (e.type === 'keypress') {
simtext += String.fromCharCode(char_code);
} else if (e.type === 'mousedown') {
$simulator.focus();
} else if (e.type === 'mouseup') {
$simulator.blur();
}
$log.append(text); // write to logger
$simulator.append(simtext); // add text to textarea if exists
$simulator.trigger(e); // trigger the event on $simulator
current += 1; // increase the iterator variable
simulate(current);
}, e.delay_time);
} else {
$log.append(' == FINISHED == ');
}
}
$('#simulate').click(function() {
simulate(0);
});
});
HTML代码:
<!DOCTYPE html>
<html>
<head>
<script class="jsbin" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script src="events.js"></script>
<meta charset=utf-8 />
<title>JS Bin</title>
<!--[if IE]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<style>
article, aside, figure, footer, header, hgroup,
menu, nav, section { display: block; }
#simulate {
cursor: pointer; border: 2px solid #CCC; width: 80px; text-align: center;
}
#container, #log { float: left;}
#container { width: 25%; }
#log { width: 50%; }
</style>
</head>
<body>
<div id="container">
<h4>Write your text here:</h4>
<textarea id="text"></textarea>
<br/><br />
<div id="simulate">Simulate:</div>
<br/>
<textarea id="simulator"></textarea>
</div>
<div id="log">
<h4>Logger here</h4>
</div>
</body>
</html>
关于javascript - 从存储的事件对象重新触发 javascript 事件，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/8073978/