jQuery:修飾子が押されたときにリンク変更 - しかし、リンクは動作を停止します
-
01-10-2019 - |
質問
通常、URL 1を指すリンクを作成しようとしています。また、シフトキーが押されたときにURL 2を作成しようとしています。このコードサンプルに到着しました。リンクを適切に切り替えます(リンク上にホバリングするときにブラウザステータスバーに示されているように)が、URL 2をクリックすることは機能しません。ブラウザは何もしません。そうです:リンクが存在しますが、クリックすると何もしません。
Firefox 3.6.6とSafari 5.0でこれを試してみましたが、両方とも同じ結果です。
ヒントはありますか?ありがとう!
<script type="text/javascript" src="http://jqueryjs.googlecode.com/files/jquery-1.3.2.min.js"></script>
<script>
$(document).keydown(function(event) {
if (event.keyCode == '16') {
$("#mylink").text("My Link Extended");
$("#mylink").attr("href", "http://www.google.com/");
}
});
$(document).keyup(function(event) {
if (event.keyCode == '16') {
$("#mylink").text("My Link");
$("#mylink").attr("href", "bla");
}
});
</script>
<a href="normalurl" id="mylink">My Link</a>
解決
シフトキーが押されている間、ブラウザがDOMの更新に少し忙しすぎたように思えますので、フラグを設置しました。
<script type="text/javascript">
$(document).ready(function() {
var ExtendedLinkShown=false;
$(document).keydown(function(event) {
if (!ExtendedLinkShown && event.keyCode == '16') {
$("#mylink").text("My Link Extended");
$("#mylink").attr("href", "http://www.google.com/");
ExtendedLinkShown=true;
}
});
$(document).keyup(function(event) {
if (event.keyCode == '16') {
$("#mylink").text("My Link");
$("#mylink").attr("href", "bla");
ExtendedLinkShown=false;
}
});
});
</script>
今の問題だけが - ロマン・デヴアードによって指摘されているように - シフト + [新しいブラウザ]ウィンドウをクリックします。
他のヒント
Shiftキーが押されているため、DOMが「ブラウザ」が特別なリクエストを処理すると考えているように見えます。そのため、コマンドがDOMに送信されて開くと失敗します。
私は少しテストをして、これを思いつきました。
<script type="text/javascript" src="http://jqueryjs.googlecode.com/files/jquery-1.3.2.min.js"></script>
<script>
$(document).keydown(function(event) {
if (event.keyCode == '16') {
event.keyCode = null; //Remove that
$("#mylink").text("My Link Extended");
$("#mylink").attr("href", "http://www.google.com/");
event.keyCode = '16'; //Add it back
}
});
$(document).keyup(function(event) {
if (event.keyCode == '16') {
event.keyCode = null; //Remove that
$("#mylink").text("My Link");
$("#mylink").attr("href", "bla");
event.keyCode = '16'; //Add it back
}
});
</script>
<a href="normalurl" id="mylink">My Link</a>
そして、これはGoogle Chromeでは機能しているようですが、かなりハッキーです。
所属していません StackOverflow