1.alert会阻塞掉后台js执行,同时会停止监听键盘事件,除了enter外。
2.从网上找到的资料来看,对所有的浏览器,alert都会阻塞掉js执行
3.利用js模拟事件会出现问题,创建KeyboardEvent事件,最终所产生的事件的keycode都是0,无论在初始化的时候赋什么值。可以使用普通事件来实现。现放一个别人实现的代码测试:下面是html代码。
<!DOCTYPE html>
<!-- paulirish.com/2008/conditional-stylesheets-vs-css-hacks-answer-neither/ -->
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7" lang="en"> <![endif]-->
<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8" lang="en"> <![endif]-->
<!--[if IE 8]> <html class="no-js lt-ie9" lang="en"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js" lang="en"> <!--<![endif]-->
<head>
<script src="http://code.jquery.com/jquery-1.8.1.min.js"></script>
<meta charset="utf-8" />
<title>Fix them keys, por favor</title>
</head>
<body>
<header>
<h1>Keydown testing</h1>
<hr>
</header>
<section id="buttonville">
<h2>Trigger through generic Event object</h2>
<ul id="buttons-generic">
<li>
<button data-key="37">Left</button>
<button data-key="39">Right</button>
<button data-key="38">Up</button>
<button data-key="40">Down</button>
<button data-key="13">Enter</button>
<button data-key="27">Esc</button>
<button data-key="65">A</button>
</li>
</ul>
<h2>Trigger through KeyboardEvent</h2>
<ul id="buttons-keyboard">
<li>
<button data-key="37">Left</button>
<button data-key="39">Right</button>
<button data-key="38">Up</button>
<button data-key="40">Down</button>
<button data-key="13">Enter</button>
<button data-key="27">Esc</button>
<button data-key="65">A</button>
</li>
</ul>
<hr>
</section>
<section id="tracer">
<ul class="logs"></ul>
</section>
</body>
</html>
css代码如下
ul.logs {
list-style:none;
}
ul.logs > li {
background-color:#FFFFCC;
padding:5px;
border-bottom:solid 1px #CCC;
}
js代码如下:
function __triggerKeyboardEvent(el, keyCode)
{
var eventObj = document.createEventObject ?
document.createEventObject() : document.createEvent("Events");
if(eventObj.initEvent){
eventObj.initEvent("keydown", true, true);
}
eventObj.keyCode = keyCode;
eventObj.which = keyCode;
el.dispatchEvent ? el.dispatchEvent(eventObj) : el.fireEvent("onkeydown", eventObj);
}
function traceEvent(e){
$(".logs").prepend(jQuery("<li>").html(
"Key = " + e.keyCode
).fadeIn());
console.log(e);
}
function triggerKeyboardEvent(el, keyCode){
var keyboardEvent = document.createEvent("KeyboardEvent");
var initMethod = typeof keyboardEvent.initKeyboardEvent !== 'undefined' ? "initKeyboardEvent" : "initKeyEvent";
keyboardEvent[initMethod](
"keydown",
true, // bubbles oOooOOo0
true, // cancelable
window, // view
false, // ctrlKeyArg
false, // altKeyArg
false, // shiftKeyArg
false, // metaKeyArg
keyCode,
0 // charCode
);
el.dispatchEvent(keyboardEvent);
}
$(document).ready(function(){
document.addEventListener("keydown", function(e){
traceEvent(e);
});
$("#buttons-generic").find("button").click(function(){
__triggerKeyboardEvent(document.body, parseInt($(this).attr("data-key")));
});
$("#buttons-keyboard").find("button").click(function(){
triggerKeyboardEvent(document.body, parseInt($(this).attr("data-key")));
});
/*
setInterval(function(){
__triggerKeyboardEvent(document.body, 13);
}, 5000);
*/
});
总结:
虽然花了一整天解决项目中的问题,在查的过程当中,发现这些问题。整体来说,我之前想的方法都不能解决遇到的问题。不过也好,知道这个方法为什么不行,也是一种收获。