jQuery: يتغير الرابط عندما تمسك المعدل - لكن الرابط يتوقف عن العمل

Question

أحاول إنشاء رابط يشير إلى 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>

Answer 1

يبدو أن المتصفح أصبح مشغولاً قليلاً في تحديث 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>

القضية فقط الآن هي - كما أشار رومان ديفيود - تحول + انقر فوق فتح نافذة متصفح جديدة.

Answer 2

يبدو أن مفتاح التحول يتم الاحتفاظ به في 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 ، ولكنه متسلل للغاية.