एक <a> टैग पर रोका डिफॉल्ट ()

133

मेरे पास कुछ HTML और jQuery हैं जो divएक लिंक पर क्लिक करने पर इसे दिखाने या छिपाने के लिए ऊपर और नीचे स्लाइड करते हैं:

<ul class="product-info">
  <li>
    <a href="#">YOU CLICK THIS TO SHOW/HIDE</a>
    <div class="toggle">
      <p>CONTENT TO SHOW/HIDE</p>
    </div>
  </li>
</ul>

$('div.toggle').hide();
$('ul.product-info li a').click(function(event){
  $(this).next('div').slideToggle(200);
}

मेरा प्रश्न है: मैं preventDefault()अपने URL के अंत में एक लिंक के रूप में लिंक करने और "#" को जोड़ने और पृष्ठ के शीर्ष पर कूदने के लिए उपयोग कैसे करूं ?

मैं सही सिंटैक्स का पता नहीं लगा सकता, मैं सिर्फ एक त्रुटि कह रहा हूँ

stopDefault () एक फंक्शन नहीं है।

javascript jquery

— क्रिस जे एलन
स्रोत

194

कुछ इस तरह की कोशिश करें:

$('div.toggle').hide();
$('ul.product-info li a').click(function(event) {
    event.preventDefault();
    $(this).next('div').slideToggle(200);
});

यहाँ jQuery प्रलेखन में उस बारे में पृष्ठ है

— डेविड गुआलानो
स्रोत

53

hrefविशेषता के रूप में सेट करेंhref="javascript:;"

<ul class="product-info">
  <li>
   <a href="javascript:;">YOU CLICK THIS TO SHOW/HIDE</a>
  <div class="toggle">
    <p>CONTENT TO SHOW/HIDE</p>
  </div>
 </li>
</ul>

— मुसद्दीक खान
स्रोत

एंकरों के लिए अच्छा सा रत्न - धन्यवाद! क्या कोई वर्णन कर सकता है कि यह क्यों काम करता है?

— justinpage

8

hrefएंकर टैग की विशेषता @KLVTZ aखाली नहीं हो सकती है ... लेकिन हम इसे javascript:<code-here>कानूनी / वैध कर सकते हैं। हम तब <code-here>अर्धविराम जोड़कर केवल एक खाली कथन दर्ज करते हैं । इस तरह लिंक कुछ नहीं करता है।

— स्टिजन डी विट

1

आपका बहुत बहुत धन्यवाद! इसने मुझे बैक बटन कार्यक्षमता को लागू करने की अनुमति दी (इस तरह $ $ CalePHP के ब्रेडक्रंब में pushState () के सकल सेट द्वारा राज्य को याद करते हुए) इस तरह से-> Html-> addCrumb ('सत्र', 'जावास्क्रिप्ट: window.history.back) (); ');

— अंतरिक्ष यात्री

38

यह सुझाव दिया जाता है कि आप उपयोग न करें return false, क्योंकि परिणामस्वरूप 3 चीजें होती हैं:

event.preventDefault ();
event.stopPropagation ();
कॉलबैक निष्पादन रोक देता है और कॉल किए जाने पर तुरंत वापस आ जाता है।

तो इस प्रकार की स्थिति में, आपको वास्तव में केवल उपयोग करना चाहिए event.preventDefault();

पुरालेख लेख - jQuery घटनाक्रम: स्टॉप (मिस) रिटर्न झूठी का उपयोग करना

— रयान
स्रोत

13

वैकल्पिक रूप से, आप बस क्लिक ईवेंट से गलत वापस आ सकते हैं:

 $('div.toggle').hide();
 $('ul.product-info li a').click(function(event){
  $(this).next('div').slideToggle(200);
+ return false; 
 });

जिससे A-Href ट्रिगर हो जाएगा।

हालांकि, ध्यान देने योग्य कारणों के लिए, एक आदर्श दुनिया में जो अभी भी कहीं जाना चाहिए, उन लोगों के लिए, जो नए टैब में लिंक खोलना चाहते हैं;)

— केंट फ्रेड्रिक
स्रोत

1

हाँ, मुझे लगता है कि मैं जवाब दे रहा था कि मुझे क्या लगा कि आपका इरादा सवाल के बजाय था :)

— केंट फ्रेड्रिक

क्या इसकी कीमत के लिए, कई साल पहले यह कहा गया था कि आपको -1 को वापस करना चाहिए ताकि href को ट्रिगर किया जा सके। मुझे नहीं लगता कि यह अब किसी भी ब्राउज़र में काम करता है, और पेज जंपिंग को रोकने के लिए आपको "गलत रिटर्न" देना होगा।

— रैंडी

12

यह एक गैर-JQuery समाधान है जिसे मैंने अभी परीक्षण किया है और यह काम करता है।

<html lang="en">
<head>
<script type="text/javascript">
addEventListener("load",function(){
    var links= document.getElementsByTagName("a");
    for (var i=0;i<links.length;i++){
        links[i].addEventListener("click",function(e){
        alert("NOPE!, I won't take you there haha");
        //prevent event action
        e.preventDefault();
        })
    }
}); 

</script>
</head>
<body>
<div>
<ul>
    <li><a href="http://www.google.com">Google</a></li>
    <li><a href="http://www.facebook.com">Facebook</a></li>
    <p id="p1">Paragraph</p>
</ul>
</div>
<p>By Jefrey Bulla</p>
</body>
</html>

— जेफरी बुल्ला
स्रोत

12

<ul class="product-info">
  <li>
    <a href="javascript:void(0);">YOU CLICK THIS TO SHOW/HIDE</a>
      <div class="toggle">
        <p>CONTENT TO SHOW/HIDE</p>
      </div>
  </li>
</ul>

उपयोग

javascript: void (0);

— HATCHA
स्रोत

@ अहदशरीफ I ने FF 40.0.3 और IE 11 पर आज परीक्षण किया है, अभी भी काम कर रहे हैं।

— HATCHA

1

मुझे लगता है कि शून्य (0) उपयोगकर्ताओं के लिए बदसूरत / भ्रामक हो सकता है, जो लिंक देखने के बाद इसे देख सकते हैं। आप वास्तव में कोई भी वैध जेएस डाल सकते हैं, इसलिए मैं एक टिप्पणी डालना पसंद करता हूं जो यह बताता है कि यह क्या करता है। जैसेhref="javascript:// Send Email"

— २०:१० पर कोलिन

11

अभी तक का उपयोग कर जावास्क्रिप्ट में ऐसा करने का एक और तरीका है inline onclick, IIFE, eventऔर preventDefault():

<a href='#' onclick="(function(e){e.preventDefault();})(event)">Click Me</a>

— ए-Sharabiani
स्रोत

नमस्ते, या बस<a href='#' onclick="event.preventDefault()">Click Me</a>

— अकबोट

6

कई ऑपरेशन के बाद, जब पेज को आखिरकार लिंक पर जाना चाहिए तो आप निम्नलिखित कार्य कर सकते हैं:

          jQuery("a").click(function(e){
            var self = jQuery(this);
            var href = self.attr('href');
            e.preventDefault();
            // needed operations

            window.location = href;
          });

— 1nstinct
स्रोत

1

क्यों करते हैं preventDefault, और फिर डिफ़ॉल्ट कार्रवाई खुद करते हैं? बस वही करें जो आपको जोड़ने की आवश्यकता है, और डिफ़ॉल्ट को अभी भी होने दें।

— नथ्नवाड़ा

5

सिर्फ css में ही क्यों न करें?

अपने एंकर टैग में 'href' विशेषता को बाहर निकालें

<ul class="product-info">
  <li>
    <a>YOU CLICK THIS TO SHOW/HIDE</a>
    <div class="toggle">
      <p>CONTENT TO SHOW/HIDE</p>
    </div>
  </li>
</ul>

अपनी सीएसएस में,

  a{
    cursor: pointer;
    }

1

यह तरीका खो जाएगा: बुरे ब्राउज़रों में हॉवर विशेषता (यानी परिवार)

— स्ट्रे

4

यदि घटना के प्रचार को रोकना आपको परेशान नहीं करता है, तो बस उपयोग करें

return false;

अपने हैंडलर के अंत में। JQuery में यह डिफ़ॉल्ट व्यवहार को रोकता है और यह ईवेंट को बंद कर देता है।

— sebarmeli
स्रोत

4

आप return false;ईवेंट कॉल को इवेंट प्रचार से रोकने के लिए उपयोग कर सकते हैं , यह इसे event.preventDefault();नकारने की तरह कार्य करता है। या आप javascript:void(0)दिए गए अभिव्यक्ति का मूल्यांकन करने के लिए href विशेषता में उपयोग कर सकते हैं और फिर undefinedतत्व पर लौट सकते हैं ।

जब यह कहा जाता है तो घटना लौटना:

<a href="" onclick="return false;"> ... </a>

शून्य मामला:

<a href="javascript:void(0);"> ... </a>

आप इसके बारे में अधिक देख सकते हैं: href के लिए शून्य (0) को जोड़ने और एंकर टैग के क्लिक इवेंट श्रोता पर 'झूठे' को जोड़ने का क्या प्रभाव है?

— RPichioli
स्रोत