javascript - هل يمكنني الاتصال بـ jquery click()لمتابعة رابط<a>إذا لم أقم بربط معالج أحداث به بربط أو انقر بالفعل؟




firefox events (9)

من المثير للاهتمام ، ربما هذا هو "طلب الميزة" (أي علة) ل jQuery. لا يؤدي حدث النقرة jQuery إلا إلى تشغيل إجراء النقرة (يسمى onClick event on the DOM) على العنصر في حالة ربط حدث jQuery بالعنصر. يجب عليك الذهاب إلى قوائم بريد jQuery ( http://forum.jquery.com/ ) والإبلاغ عنها. قد يكون هذا هو السلوك المطلوب ، لكنني لا أعتقد ذلك.

تصحيح:

لقد أجريت بعض الاختبارات وما قلته خطأ ، حتى إذا ربطت إحدى الوظائف بعلامة "a" ، فإنها لا تأخذك إلى موقع الويب المحدد بواسطة سمة href. جرب التعليمة البرمجية التالية:

<html>
<head>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>
 <script>
  $(document).ready(function() {
   /* Try to dis-comment this:
   $('#a').click(function () {
    alert('jQuery.click()');
    return true;
   });
   */
  });
  function button_onClick() {
   $('#a').click();
  }
  function a_onClick() {
   alert('a_onClick');
  }
 </script>

</head>
<body>
 <input type="button" onclick="button_onClick()">
 <br>
 <a id='a' href='http://www.google.com' onClick="a_onClick()"> aaa </a>

</body>
</html> 

لن يتم الانتقال إلى google.com أبدًا ، ما لم تنقر مباشرةً على الرابط (مع أو بدون الشفرة التي تم التعليق عليها). لاحظ أيضًا أنه حتى في حالة ربط حدث النقرة بالرابط ، فلن يستمر اللون الأرجواني بعد النقر على الزر. يذهب فقط الأرجواني إذا قمت بالنقر فوق الارتباط مباشرة.

لقد أجريت بعض الأبحاث ويبدو أن .click لا يفترض أن يعمل مع العلامات "a" لأن المتصفح لا يعمل على "نقرة مزيفة" باستخدام javascript. أعني ، لا يمكنك "النقر" على عنصر به javascript. باستخدام العلامات "a" ، يمكنك تشغيل الحدث onClick الخاص بنا ، ولكن لن يغيّر الارتباط الألوان (إلى لون الرابط الذي تمت زيارته ، ويكون الإعداد الافتراضي باللون الأرجواني في معظم المتصفحات). لذلك ، لن يكون من المنطقي أن نجري نشاطًا بالضغط على $ (). مع علامات "a" نظرًا لأن فعل الانتقال إلى السمة href ليس جزءًا من حدث onClick ، ​​ولكن ضمنيًا في المتصفح.

لدي جهاز توقيت في جافا سكريبت خاص بي والذي يحتاج إلى محاكاة نقرة رابط للانتقال إلى صفحة أخرى بمجرد انقضاء الوقت. للقيام بذلك ، أستخدم وظيفة click() في jQuery. لقد استخدمت $().trigger() و window.location أيضا ، وأنا يمكن أن تجعلها تعمل على النحو المنشود مع الثلاثة.

لقد لاحظت بعض السلوك الغريب click() وأنا أحاول أن أفهم ما يحدث ولماذا.

أنا أستخدم Firefox لكل ما أصفه في هذا السؤال ، ولكني مهتم أيضًا بما ستفعله المتصفحات الأخرى بهذا.

إذا لم أقم باستخدام $('a').bind('click',fn) أو $('a').click(fn) لتعيين معالج أحداث ، ثم اتصل بـ $('a').click() يبدو أنه لا يفعل شيئًا على الإطلاق. لا يستدعي المعالج الافتراضي للمستعرض لهذا الحدث ، حيث لا يقوم المتصفح بتحميل الصفحة الجديدة.

ومع ذلك ، إذا قمت بتعيين معالج أحداث أولاً ، فإنه يعمل كما هو متوقع ، حتى إذا لم يفعل معالج الحدث أي شيء.

$('a').click(function(){return true;}).click();

هذا تحميل الصفحة الجديدة كما لو كنت قد نقرت على نفسي.

لذا فإن سؤالي ذو شقين: هل هذا السلوك غريب لأنني أقوم بشيء خاطئ في مكان ما؟ ولماذا لا تقوم نداء click() بأي شيء مع السلوك الافتراضي إذا لم أقم بإنشاء معالج خاص بي؟

تصحيح:

كما حدد هوفمان عندما حاول تكرار نتائجي ، فإن النتيجة التي وصفتها أعلاه لا تحدث في الواقع. لست متأكداً من سبب الأحداث التي لاحظتها بالأمس ، لكنني متأكد اليوم أنها لم تكن ما وصفته في السؤال.

إذاً ، الإجابة هي أنه لا يمكنك "زيف" النقرات في المستعرض وأن جميع jQuery يقوم باستدعاء معالج الحدث الخاص بك. لا يزال بإمكانك استخدام window.location لتغيير الصفحة ، وهذا يعمل بشكل جيد بالنسبة لي.


تعتبر معالجات النقر على علامات الربط حالة خاصة في jQuery.

أعتقد أنك قد تشعر بالحيرة بين حدث onclick للمكالمة (المعروف بالمستعرض) وحدث النقر الخاص بعنصر jQuery الذي يلف مفهوم DOM لعلامة الارتساء.

يمكنك تنزيل مصدر jQuery 1.3.2 here .

الأقسام ذات الصلة من المصدر هي خطوط 2643-2645 (لقد قسمت هذا إلى عدة أسطر لتسهيل فهمها):

// Handle triggering native .onfoo handlers (and on links since we don't call .click() for links)
if (
     (!elem[type] || (jQuery.nodeName(elem, 'a') && type == "click")) && 
       elem["on"+type] && 
       elem["on"+type].apply( elem, data ) === false
   )
     event.result = false;

لا يدعم JS / jQuery السلوك الافتراضي للروابط "النقر" برمجيًا.

ما يمكنك القيام به هو إنشاء نموذج وإرساله. بهذه الطريقة ، لن تضطر إلى استخدام window.location أو window.open ، والتي يتم حظرها غالبًا على شكل نوافذ منبثقة غير مرغوب فيها من قبل المتصفحات.

يحتوي هذا البرنامج النصي على طريقتين مختلفتين: واحدة تحاول فتح 3 علامات تبويب / نوافذ جديدة (تفتح 1 فقط في IE و Chrome ، والمزيد من المعلومات أدناه) وأخرى تطلق حدثًا مخصصًا عند النقر فوق الرابط.

هنا هو كيف:

HTML

<html>
<head>
    <script src="jquery-1.9.1.min.js" type="text/javascript"></script>
    <script src="script.js" type="text/javascript"></script>
</head>
<body>
    <button id="testbtn">Test</button><br><br>

    <a href="https://google.nl">GOOGLE</a><br>
    <a href="http://en.wikipedia.org/wiki/Main_Page">WIKI</a><br>
    <a href="https://.com/">SO</a>
</body>
</html>

jQuery (script.js)

$(function()
{ 
    // Try to open all 3 links by pressing the button
    // - Firefox opens all 3 links
    // - Chrome only opens 1 of them without popup warning
    // - IE only opens 1 of them WITH popup warning
    $("#testbtn").on("click", function()
    {
        $("a").each(function()
        {
            var form = $("<form></form>");
            form.attr(
            {
                id     : "formform",
                action : $(this).attr("href"),
                method : "GET",
                // Open in new window/tab
                target : "_blank"
            });

            $("body").append(form);
            $("#formform").submit();
            $("#formform").remove();
        });
    });

    // Or click the link and fire a custom event 
    // (open your own window without following the link itself)
    $("a").on("click", function()
    {
        var form = $("<form></form>");
        form.attr(
        {
            id     : "formform",
            // The location given in the link itself
            action : $(this).attr("href"), 
            method : "GET",
            // Open in new window/tab
            target : "_blank"              
        });

        $("body").append(form);
        $("#formform").submit();
        $("#formform").remove();

        // Prevent the link from opening normally
        return false;
    });

});

ما يفعله هو لكل عنصر رابط:

  1. قم بإنشاء نموذج
  2. اعطها الصفات
  3. إلحاقه بـ DOM حتى يمكن تقديمه
  4. سلمها
  5. إزالة النموذج من DOM ، وإزالة كافة الآثار * إدراج ضحك شرير *

أصبح لديك الآن تحميل علامة تبويب / نافذة جديدة "https://google.nl" (أو أي عنوان URL تريده ، فما عليك سوى استبداله). لسوء الحظ عندما تحاول فتح أكثر من نافذة بهذه الطريقة ، يمكنك الحصول على شريط الرسائل Popup blocked عند محاولة فتح النافذة الثانية (ما زال أولها مفتوحًا).

تم العثور على مزيد من المعلومات حول كيفية الوصول إلى هذه الطريقة هنا:

فتح نافذة / علامة تبويب جديدة دون استخدام window.open أو window.location.href


لا يفعل أي شيء لأنه لم تكن هناك أحداث مرتبطة بهذا الحدث. إذا كنت أتذكر بشكل صحيح ، تحتفظ jQuery بقائمة خاصة بها لمعاملات الأحداث المرتبطة بـ NodeLists للأداء ولأغراض أخرى.


تشغيل عنصر ارتباط تشعبي موجود داخل العنصر الذي تريد ربطه بمسج .click ()

<div class="TopicControl">
    <div class="articleImage">
       <a href=""><img src="" alt=""></a>
    </div>
</div>

في البرنامج النصي الخاص بك ، تقوم بالربط إلى الحاوية الرئيسية التي تريد أن تنقر عليها. ثم تستخدم منهجية jquery القياسية للعثور على العنصر (النوع والفئة والمعرف) وإشعال النقرة. ما يحدث هو دخول jquery دالة متكررة لإطلاق النقرة وكسر الدالة العودية عن طريق أخذ الدالة 'e' و stopPropagation () وإرجاع false لأنك لا ترغب في عمل jquery لفعل أي شيء آخر ولكن إطلاق الرابط.

$('.TopicControl').click(function (event) {
         $(this).find('a').click();
        event.stopPropagation();
        return false;
     });

الحل البديل هو التفاف الحاويات في العنصر ومكان كحاويات داخل بدلاً من. تعيين الامتدادات لعرض كتلة لتتوافق مع معايير w3c.


خيار آخر هو بالطبع استخدام javascript الفانيلا فقط:

document.getElementById("a_link").click()

يمكنك استخدام jQuery لتحديد كائن jQuery لهذا العنصر. ثم ، احصل على عنصر DOM الأساسي واستدعاء طريقة click() .

عن طريق معرف

$("#my-link").each(function (index) { $(this).get(0).click() });

أو استخدم jQuery للنقر فوق مجموعة من الارتباطات بواسطة CSS class

$(".my-link-class").each(function (index) { $(this).get(0).click() });

إذا نظرت إلى رمز الدالة $.click وجود بيان شرطي يتحقق مما إذا كان العنصر قد سجل المستمعين لحدث click قبل أن يتابع. لماذا لا نحصل فقط على سمة href من الرابط ونغير موقع الصفحة يدويًا؟

 window.location.href = $('a').attr('href');

EDIT: إليك سبب عدم النقر من خلال ، من دالة trigger ، مصدر jQuery للإصدار 1.3.2:

 // Handle triggering native .onfoo handlers (and on links since we don't call .click() for links)
    if ( (!elem[type] || (jQuery.nodeName(elem, 'a') && type == "click")) && elem["on"+type] && elem["on"+type].apply( elem, data ) === false )
        event.result = false;

    // Trigger the native events (except for clicks on links)
    if ( !bubbling && elem[type] && !event.isDefaultPrevented() && !(jQuery.nodeName(elem, 'a') && type == "click") ) {
        this.triggered = true;
        try {
            elem[ type ]();
        // prevent IE from throwing an error for some hidden elements
        } catch (e) {}
    }

بعد أن يقوم باستدعاء معالجات (إذا كان هناك أي) ، يقوم jQuery بتشغيل حدث على الكائن. ومع ذلك ، فإنها لا تستدعي سوى معالجات الأعمدة لأحداث النقر إذا كان العنصر ليس رابطًا. أعتقد أن هذا تم بشكل هادف لسبب ما. يجب أن يكون هذا صحيحًا على الرغم مما إذا كان معالج الأحداث قد تم تعريفه أم لا ، لذا فأنا غير متأكد من السبب في حالتك في إرفاق معالج حدث تسبب في استدعاء معالج onClick الأصلي. عليك القيام بما قمت به والخطوة خلال التنفيذ لمعرفة أين يتم الاتصال بها.


إذا كان لديك على jQuery 1.3+ ثم استخدم. .live()

يربط معالج إلى حدث (مثل النقر) لجميع العناصر المتطابقة الحالية والمستقبلية. يمكن أيضًا ربط الأحداث المخصصة.





javascript jquery firefox events click