एंकर टैग पर बचाव कैसे करें?

Question

मान लीजिए कि मेरे पास एक एंकर टैग है जैसे कि

<a href="#" ng-click="do()">Click</a>

मैं AngularJS में ब्राउज़र को # नेविगेट करने से कैसे रोक सकता हूं ?

Comments

जैसे क्रिस नीचे कहता है, बस बाहर छोड़ दो href।

— जेसी

यही नहीं क्रिस कहते हैं, जेसी, href=''माउस पॉइंटर व्यवहार रखने के लिए उपयोग करें।

— oma

आप बस # चिह्न को href से हटा देते हैं, यह ठीक है।

— हेंग वोंगकोल

या बस href = "जावास्क्रिप्ट: शून्य (0);" सूचक को रखने के लिए लेकिन कोई कार्रवाई नहीं है (जब तक कि आप एक और क्लिक हैंडलर नहीं जोड़ते हैं)

— रोबा

क्या आप क्रिस और stackoverflow.com/a/11672909 द्वारा सबसे अच्छे और सबसे ज्यादा वोट दिए गए उत्तर को बदल सकते हैं ?

— पिओट्र डोब्रोगोस्ट 14

Answer 1

अद्यतन : मैंने इस समाधान पर अपना विचार बदल दिया है। इस पर काम करने में अधिक विकास और समय बीतने के बाद, मेरा मानना ​​है कि इस समस्या का एक बेहतर समाधान निम्नलिखित है:

<a ng-click="myFunction()">Click Here</a>

और फिर cssएक अतिरिक्त नियम रखने के लिए अपने अपडेट करें :

a[ng-click]{
    cursor: pointer;
}

इसकी बहुत अधिक सरल और सटीक समान कार्यक्षमता प्रदान करता है और यह बहुत अधिक कुशल है। आशा है कि भविष्य में इस समाधान को देखने वाले किसी और के लिए सहायक हो सकता है।

---

निम्नलिखित मेरा पिछला समाधान है, जिसे मैं सिर्फ विरासत उद्देश्यों के लिए यहाँ छोड़ रहा हूँ:

यदि आपको यह समस्या बहुत आ रही है, तो एक साधारण निर्देश जो इस समस्या को ठीक करेगा, वह है:

app.directive('a', function() {
    return {
        restrict: 'E',
        link: function(scope, elem, attrs) {
            if(attrs.ngClick || attrs.href === '' || attrs.href === '#'){
                elem.on('click', function(e){
                    e.preventDefault();
                });
            }
        }
   };
});

यह सभी एंकर टैग ( <a></a>) की जांच करता है कि क्या उनकी hrefविशेषता या तो एक खाली स्ट्रिंग ( "") या हैश ( '#') है या एक ng-clickअसाइनमेंट है। यदि यह इनमें से कोई भी स्थिति पाता है, तो यह ईवेंट को पकड़ता है और डिफ़ॉल्ट व्यवहार को रोकता है।

केवल नीचे की ओर यह है कि यह सभी एंकर टैग के लिए इस निर्देश को चलाता है। इसलिए यदि आपके पास पृष्ठ पर बहुत सारे एंकर टैग हैं और आप केवल उनमें से थोड़ी संख्या के लिए डिफ़ॉल्ट व्यवहार को रोकना चाहते हैं, तो यह निर्देश बहुत कुशल नहीं है। हालाँकि, मैं लगभग हमेशा चाहता हूँ preventDefault, इसलिए मैं अपने AngularJS ऐप्स में इस निर्देश का उपयोग करता हूँ।

Comments

धन्यवाद @ कृतिजक्रेमी, बहुत रचनात्मक आलोचना। किसी भी सुझाव इसे कम "गड़बड़" बनाने के लिए?

— १

जैसा कि अन्य उत्तरों में कहा गया है, खाली hrefविशेषता रखने से विभिन्न ब्राउज़रों में अलग-अलग व्यवहार होता है। हालांकि मैं मानता हूं कि यह अब तक सबसे साफ और सबसे कुशल समाधान है, इसमें कुछ क्रॉस-ब्राउज़र समस्याएँ हैं। निर्देशात्मक दृष्टिकोण का उपयोग करके ब्राउज़र को <a>टैग को सामान्य रूप से संभालने की अनुमति देता है , लेकिन फिर भी ओपी को वह उत्तर मिल रहा है जिसकी उन्हें तलाश थी।

— टेनिस

यह काम करता है और सभी लेकिन एक बहुत ही सरल समस्या के लिए इसकी गंभीरता से overkill। कोणीय आपको $ घटना के साथ ईवेंट ऑब्जेक्ट तक पहुंच प्रदान करता है, इसलिए आप बिल्कुल वही कर सकते हैं जो आप सादे js या jquery क्लिक इवेंट में करेंगे। इस उत्तर को देखें stackoverflow.com/a/19240232/1826354 और इस पर मेरी टिप्पणी

— चार्ली मार्टिन

हां। आप ऐसा कर सकते हैं। इस पोस्ट पर दो अन्य उत्तर हैं जो पहले से ही आप का वर्णन कर रहे हैं। और मैं मानता हूं, यह ओवरकिल है। इसलिए मैंने वह अपडेट किया जो मैंने किया था।

— 21

यदि आप अपनी साइट पर पहुंच की परवाह नहीं करते हैं तो यह ठीक है । Href छोड़ने से, उस आइटम पर टैब करने के लिए आपके कीबोर्ड का उपयोग करना संभव नहीं है। जब तक आप एक tabindex जोड़ा। इस सब को ध्यान में रखते हुए, क्यों न सिर्फ निवारण का उपयोग किया जाए ...? यही इसके लिए वहाँ है।

— दुहसेकोह

Answer 2

डॉक्स के लिए ngHref के अनुसार आपको href छोड़ना चाहिए या href = "" करना चाहिए।

<input ng-model="value" /><br />
<a id="link-1" href ng-click="value = 1">link 1</a> (link, don't reload)<br />
<a id="link-2" href="" ng-click="value = 2">link 2</a> (link, don't reload)<br />
<a id="link-4" href="" name="xx" ng-click="value = 4">anchor</a> (link, don't reload)<br />
<a id="link-5" name="xxx" ng-click="value = 5">anchor</a> (no link)<br />

Comments

यह एकमात्र वास्तविक अच्छा जवाब है। कुछ भी जिसके लिए DOM या देशी घटनाओं को छूने की आवश्यकता है, वह संदिग्ध है

— vincent

यह सही जवाब है। अगर आप <a> विशेषता से href ड्रॉप करते हैं तो AngularJS डिफ़ॉल्ट रूप से कॉल को रोक देगा:

— pkozlowski.opensource

Href विशेषता को छोड़ने का एकमात्र नकारात्मक पक्ष यह है कि आप एक लिंक पर मँडराते समय सामान्य 'पॉइंटर' कर्सर को खो देते हैं। आप अपनी स्टाइलशीट में एक नियम जोड़कर इसे ठीक कर सकते हैं: a: hover {कर्सर: पॉइंटर; }

— कर्लगोल्ड

ध्यान रखें कि इससे टैग अन-टैब्लेबल भी हो जाता है, जो बहुत ही सुलभ नहीं है।

— रिचर्ड सुज़ले

मेरे लिए ब्राउज़र अभी भी क्लिक एक्शन को बुलबुले

— बनाता है

Answer 3

आप अपने ईवेंट में $ ईवेंट ऑब्जेक्ट को पास कर सकते हैं, और $event.preventDefault()उस पर कॉल कर सकते हैं, ताकि डिफ़ॉल्ट प्रोसेसिंग न हो:

<a href="#" ng-click="do($event)">Click</a>

// then in your controller.do($event) method
$event.preventDefault()

Comments

हाँ, और आप $ event.stopPropagation () भी कह सकते हैं ताकि ईवेंट बबल न हो (मूल रूप से, आपके पास W3C द्वारा परिभाषित इवेंट ऑब्जेक्ट तक पहुंच है: w3.org/TR/DOM-Level-2- घटनाएँ / घटनाएँ। # आयोजन-घटना )

— mna

कृपया ध्यान दें कि जिस समय यह लिखा गया था, उस समय href को खाली (या अनुपस्थित) IE8 / 9 और ओपेरा पर काम नहीं किया गया था । यह एक साल पहले था, और मुझे इसे फिर से आज़माने का मौका नहीं मिला (मैंने गितुब पर फिर से एक मुद्दा खोला, लेकिन मुझे लगता है कि उन्होंने कुछ समय पहले मुद्दों को रीसेट कर दिया था)। यदि यह ठीक है (या आप इन ब्राउज़रों की परवाह नहीं करते हैं), तो हर तरह से, क्रिस के उत्तर का उपयोग करें! अगर कोई इसे आज़मा सकता है और उत्तर को बेहतर / टिप्पणी / संपादित कर सकता है।

— मन्ना

@PuerkitoBio - मैं पुष्टि कर सकता हूँ कि IE8 और नीचे अभी भी $event.preventDefault()... IE कर की आवश्यकता है ।

— स्कूटी.नेट

नियंत्रक को $ घटना पास करने का मतलब है कि आपके नियंत्रक में DOM को संदर्भित करना, जिसका अर्थ है कि आपने अपने दृश्य और अपने नियंत्रक को युग्मित किया है। आप अपनी मूल्यांकित अभिव्यक्ति में सीधे $ घटना विधियों को कॉल कर सकते हैं: ng-click="do(); $event.preventDefault()उदाहरण के लिए ... हालांकि, यह आवश्यक नहीं है क्योंकि @ क्रिस का जवाब नीचे सही है। इससे लोगों को उन स्थितियों में मदद मिल सकती है, जहां उनके पास नेक्स्टिक्स हैं और वे कॉल करना चाहते हैं $event.stopPropagation(), हालांकि।

— बेन लेश

अंत में एक एसईओ अनुकूल समाधान। आप एनजी-व्यू - joelsaupe.com/programming/… को पुनः लोड किए बिना भी ब्राउज़र URL को अपडेट करना चाह सकते हैं। इस तरह से आपके पास लिंक हैं जो आपके दृश्य को पुनः लोड नहीं करते हैं, लेकिन एक नए टैब में खोले जा सकते हैं और खोज इंजन उनका अनुसरण कर सकते हैं। वाह!

— टॉम

Answer 4

मैं इस तरह की चीजों के लिए निर्देश का उपयोग करना पसंद करता हूं । यहाँ एक उदाहरण है

<a href="#" ng-click="do()" eat-click>Click Me</a>

और के लिए निर्देश कोड eat-click:

module.directive('eatClick', function() {
    return function(scope, element, attrs) {
        $(element).click(function(event) {
            event.preventDefault();
        });
    }
})

अब आप eat-clickकिसी भी तत्व में विशेषता जोड़ सकते हैं और यह preventDefault()स्वतः ही एड हो जाएगा।

लाभ:

1. आपको $eventअपने do()कार्य में बदसूरत वस्तु को पास नहीं करना है ।
2. आपका नियंत्रक अधिक इकाई परीक्षण योग्य है क्योंकि इसे $eventऑब्जेक्ट को स्टब करने की आवश्यकता नहीं है

Comments

@ काटो एंगुलर अपने जीवन को आसान बनाने के लिए, jQuery के अपने सबसेट के साथ आता है।

— नील

अतिरिक्त लाभ - यह IE8 और नीचे भी काम करता है , अगर यह आपके लिए मायने रखता है।

— स्कूटी.नेट

मैं हो रही है Error: $ is not defined। मैं क्या खो रहा हूँ?

— बिलाल मिर्ज़ा

मैंने कोशिश की angular.element(element).bind('click', function(event){...});। इसने काम कर दिया। Ref: jQLite

— बिलाल मिर्ज़ा

प्रस्तुत है कुछ सरल के लिए एक निर्देश जैसा कि अगर आप मुझसे पूछें तो थोड़ा फूला हुआ लगता है ... नीचे दिए गए जवाब में क्रिस की जाँच करें

— विल्ट

Answer 5

यद्यपि रेनॉड ने एक महान समाधान दिया

<a href="#" ng-click="do(); $event.preventDefault()">Click</a> 

मैंने व्यक्तिगत रूप से पाया है कि कुछ मामलों में कुछ दुष्प्रभावों से बचने के लिए आपको $ event.stopPropagation () की आवश्यकता है

<a href="#" ng-click="do(); $event.preventDefault(); $event.stopPropagation();">
    Click</a>

मेरा समाधान होगा

Answer 6

ng-click="$event.preventDefault()"

Comments

यह सबसे अच्छा उपाय है। बेशक, आप अपने स्कोप फंक्शन में $ इवेंट ऑब्जेक्ट को भी पास कर सकते हैं। जैसे एनजी-क्लिक = "myFunction ($ घटना, अन्यप्रेम) और फिर myFunction में $ event.preventDefault () रोल। इसके लिए अपना खुद का निर्देशन करना ओवरकिल है

— चार्ली मार्टिन

Answer 7

सबसे आसान समाधान जो मैंने पाया है वह यह है:

<a href="#" ng-click="do(); $event.preventDefault()">Click</a>

Comments

यह न केवल सबसे आसान है, बल्कि यह नियंत्रक के साथ कुछ भी नहीं करता है जैसे कि अन्य समाधानों में सुझाए गए हैं। नियंत्रक को युग्मित करने वाली घटना एक ऐसी चीज है जिसे आपको हर कीमत पर बचना चाहिए क्योंकि यह बहुत कठिन परीक्षण करता है।

— जौनेर

Answer 8

इसलिए इन उत्तरों को पढ़ते हुए, @ क्रिस के पास अभी भी सबसे "सही" उत्तर है, मुझे लगता है, लेकिन इसकी एक समस्या है, यह "पॉइंटर" नहीं दिखाता है ...।

तो यहाँ एक कर्सर जोड़ने की आवश्यकता के बिना इस समस्या को हल करने के दो तरीके हैं: सूचक शैली:

1. javascript:void(0)इसके बजाय का उपयोग करें #:

   <a href="javascript:void(0)" ng-click="doSomething()">Do Something</a>

2. निर्देश $event.preventDefault()में उपयोग करें ng-click(ताकि आप डोम-संबंधित संदर्भों के साथ अपने नियंत्रक को रद्दी न करें):

   <a href="#dontGoHere" ng-click="doSomething(); $event.preventDefault()">Do Something</a>

व्यक्तिगत रूप से मैं पहले वाले को पसंद करता हूं। javascript:void(0)अन्य लाभ हैं जिनकी चर्चा यहाँ की गई है । उस लिंक में "विनीत जावास्क्रिप्ट" की भी चर्चा है, जो हाल ही में भयावह है, और जरूरी नहीं कि यह सीधे एक एंग्री एप्लिकेशन पर लागू हो।

Comments

यह क्यों ठुकराया गया है? मैंने यह भी देखा कि सूचक क्रिस के जवाब के साथ नहीं दिखा रहा है।

— विम डेलाउवे

जावास्क्रिप्ट: शून्य (0) # की तुलना में बहुत बेहतर है जो यदि आप इसे गलत तरीके से कॉन्फ़िगर कर सकते हैं तो यह मार्ग पर कार्य कर सकता है। +1

— Shay Elkayam

मैं इस बारे में एक उत्तर लिखने वाला था। आप यह भी कर सकते हैंjavascript:;

— एड्रियन

Answer 9

आप निम्नानुसार कर सकते हैं

1. hrefलंगर ( a) टैग से विशेषता निकालें

2. तत्वों को क्लिक करने के लिए सीएसएस में सूचक कर्सर सेट करें

 [ng-click],
 [data-ng-click],
 [x-ng-click] {
     cursor: pointer;
 }

Answer 10

एचटीएमएल

यहाँ शुद्ध कोणीयज: एनसी-क्लिक फ़ंक्शन के पास आप सेम्पोलोन को अलग करके रोका डिफॉल्ट () फ़ंक्शन लिख सकते हैं

<a href="#" ng-click="do(); $event.preventDefault(); $event.stopPropagation();">Click me</a>

जे एस

$scope.do = function() {
    alert("do here anything..");
}

(या)

आप इस तरह से आगे बढ़ सकते हैं, यह पहले से ही यहां पर चर्चा कर रहा है।

एचटीएमएल

<a href="#" ng-click="do()">Click me</a>

जे एस

$scope.do = function(event) {
    event.preventDefault();
    event.stopPropagation()
}

Answer 11

इस विकल्प को आज़माएँ जो मैं देख सकता हूँ अभी तक ऊपर सूचीबद्ध नहीं है:

<a href="" ng-click="do()">Click</a>

Answer 12

चूंकि आप एक वेब ऐप बना रहे हैं, इसलिए आपको लिंक की आवश्यकता क्यों है?

बटन के लिए अपने एंकर स्वैप!

<button ng-click="do()"></button>

Comments

चूंकि वेन में एंकर नहीं हो सकते?

— रॉबिन वैन बालन

मैं इस बात का जिक्र कर रहा था कि अधिकांश वेब-ऐप को वेबसाइटों की तरह सापेक्ष लिंक की आवश्यकता नहीं है, वे भी अक्सर जावास्क्रिप्ट लिंक के रूप में एंकर लिंक का उपयोग करते हैं और एक पृष्ठ से लिंक नहीं करते हैं; इसलिए डिफ़ॉल्ट शैली रीसेट के साथ एक बटन बस शब्दार्थ रूप से सही है यदि ऐसा नहीं है।

— फुटपाथ

@sidonaldson वास्तव में, आजकल बहुत से वेब-ऐप्स लिंक पर निर्भर करते हैं। Angularjs रूटिंग को देखें।

— रॉबर्ट

@Robert हाँ, लेकिन यदि आप रूटिंग में निर्मित का उपयोग करते हैं तो आपको डिफ़ॉल्ट को रोकने का प्रबंधन नहीं करना है, यह आपके लिए किया गया है। मुझे लगता है क्योंकि पोस्टर एक एंकर लिंक को रद्द करना चाहता है जो वह गैर-रूट लिंक के बारे में बात कर रहा है। उदाहरण के लिए एक मॉडल आदि की शुरूआत

— sidonaldson

इस उत्तर में और भी बहुत कुछ होना चाहिए। कई मामलों में, यदि आप डिफ़ॉल्ट एंकर व्यवहार को रोकना चाहते हैं, तो आप एंकर को एक बटन के रूप में उपयोग कर रहे हैं, न कि लिंक के रूप में।

— इट्सकोमो

Answer 13

यदि अभी भी प्रासंगिक है:

<a ng-click="unselect($event)" />

...

scope.unselect = function( event ) {
 event.preventDefault();
 event.stopPropagation();
}

...

Answer 14

एक href पर घटनाओं से बचने का सबसे सुरक्षित तरीका इसे परिभाषित करना होगा

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

Answer 15

मैं साथ जाऊंगा:

<a ng-click="do()">Click</a>

• क्योंकि डॉक्स के अनुसार आपको href छोड़ने में सक्षम होना चाहिए और फिर कोणीय आपके लिए डिफ़ॉल्ट को हैंडल करेगा!

यह पूरी तरह से डिफ़ॉल्ट बात मेरे लिए भ्रामक रही है, इसलिए मैंने एक जेएसफिल्ड बनाया है, जिसमें स्पष्ट है कि कब और कहां कोणीय डिफ़ॉल्ट को रोक सकता है ।

JSFiddle एंगुलर के एक निर्देश का उपयोग कर रही है - इसलिए यह बिल्कुल समान होना चाहिए। आप यहाँ स्रोत कोड देख सकते हैं: एक टैग स्रोत कोड

मुझे उम्मीद है कि यह कुछ के लिए स्पष्टीकरण में मदद करेगा।

मैं doc को ngHref पर पोस्ट करना पसंद करता लेकिन मैं अपनी प्रतिष्ठा के कारण नहीं कर सकता।

Answer 16

यही मैं हमेशा करता हूं। एक जादू की तरह काम करता है!

<a href ng-click="do()">Click</a>

Answer 17

या अगर आपको इनलाइन की जरूरत है तो आप ऐसा कर सकते हैं:

<a href="#" ng-click="show = !show; $event.preventDefault()">Click to show</a>

Answer 18

जवाब के बहुत सारे overkill लग रहे हैं। मेरे लिए, यह काम करता है

 <a ng-href="#" ng-click="$event.preventDefault();vm.questionContainer($index)">{{question.Verbiage}}</a>

Answer 19

मुझे गिरावट (जब js बंद है) के लिए href विशेषता के मान की उपस्थिति की आवश्यकता है, इसलिए मैं खाली href विशेषता (या "#") का उपयोग नहीं कर सकता, लेकिन ऊपर दिए गए कोड ने मेरे लिए काम नहीं किया, क्योंकि मुझे एक घटना की आवश्यकता है ( ई) चर। मैंने अपना स्वयं का निर्देश बनाया:

angular.module('MyApp').directive('clickPrevent', function() {
  return function(scope, element, attrs) {
    return element.on('click', function(e) {
      return e.preventDefault();
    });
  };
});

HTML में:

<a data-click-prevent="true" href="/users/sign_up" ng-click="openSignUpModal()">Sign up</a>

Answer 20

टेनिस के जवाब से उधार लेना। मुझे पसंद है कि आपको सभी लिंक को जोड़ने के लिए एक कस्टम निर्देश बनाने की आवश्यकता नहीं है। हालाँकि, मैं अपने IE8 में काम नहीं कर सका। यहाँ आखिरकार मेरे लिए क्या काम किया (कोणीय 1.0.6 का उपयोग करके)।

ध्यान दें कि 'बाइंड' आपको कोणीय द्वारा प्रदान किए गए jqLite का उपयोग करने की अनुमति देता है ताकि पूर्ण jQuery के साथ लपेटने की आवश्यकता न हो। स्टॉपप्रोपोगेशन विधि की भी आवश्यकता है।

.directive('a', [
    function() {
        return {
            restrict: 'E',
            link: function(scope, elem, attrs) {

                elem.bind('click', function(e){
                    if (attrs.ngClick || attrs.href === '' || attrs.href == '#'){
                        e.preventDefault();
                        e.stopPropagation();
                    }
                })
            }
        };
    }
])

Comments

यह बहुत मारता है। उदाहरण के लिए, जब मैं ट्विटर बूटस्ट्रैप का उपयोग करता हूं, तो मैं dropdownप्रचार चाहता हूं लेकिन डिफ़ॉल्ट व्यवहार नहीं। यह स्निपेट अनुशंसित नहीं है ।

— रॉबिन वैन बालन

Answer 21

एंगुलर बूटस्ट्रैप ड्रॉप डाउन के लिए एंकर का उपयोग करते समय मैं इसी मुद्दे में भाग गया। एकमात्र समाधान मैंने पाया कि अनचाहे दुष्प्रभावों से बचा (यानी ड्रॉपडाउन्ट को रोकने के कारण बंद नहीं हुआ) () निम्नलिखित का उपयोग करना था:

 <a href="javascript:;" ng-click="do()">Click</a>

Answer 22

यदि आप कभी भी href पर नहीं जाना चाहते हैं ... तो आपको अपना मार्कअप बदलना चाहिए और एक बटन का प्रयोग करना चाहिए न कि एंकर टैग का क्योंकि शब्दार्थ यह एंकर या लिंक नहीं है। इसके विपरीत यदि आपके पास एक बटन है जो कुछ जांच करता है और फिर इसे पुनर्निर्देशित करता है तो यह एक लिंक / एंकर टैग होना चाहिए और एक बटन नहीं होना चाहिए ... एसईओ प्रयोजनों के लिए [यहां टेस्ट सूट सम्मिलित करें]।

उन लिंक्स के लिए जिन्हें आप केवल परिवर्तनों को सहेजने के लिए सशर्त रूप से पुनर्निर्देशित करना चाहते हैं, या गंदे राज्य को स्वीकार करना चाहते हैं ... आपको एनजी-क्लिक = "someFunction ($ घटना)" का उपयोग करना चाहिए और कुछ में अपने सत्यापन पर रोकेंDefault या रोकें।

यह भी सिर्फ इसलिए कि आप मतलब यह नहीं है कर सकते हैं करना चाहिए । जावास्क्रिप्ट: शून्य (0) दिन में अच्छी तरह से वापस काम किया ... लेकिन दकियानूसी हैकर्स / पटाखे ब्राउज़रों के फ्लैग एप्स / साइट्स के कारण जो जावास्क्रिप्ट के माध्यम से जावास्क्रिप्ट का उपयोग करते हैं ... ऊपर बत्तख का कोई कारण नहीं देखते हैं।

यह २०१६ से २०१० के बाद से बटन की तरह काम करने वाले लिंक का उपयोग करने का कोई कारण नहीं होना चाहिए ... यदि आपको अभी भी IE8 का समर्थन करना है और नीचे आपको अपने व्यवसाय के स्थान का पुनर्मूल्यांकन करने की आवश्यकता है।

Answer 23

/* NG CLICK PREVENT DEFAULT */

app.directive('ngClick', function () {
    return {
        link: function (scope, element, attributes) {
            element.click(function (event) {
                event.preventDefault();
                event.stopPropagation();
            });
        }
    };
});

Answer 24

आपको क्या करना चाहिए, यह hrefपूरी तरह से विशेषता है।

यदि आप तत्व निर्देश के लिए स्रोत कोड को देखते हैं a(जो कोणीय कोर का एक हिस्सा है), तो यह लाइन 29 पर स्थित है -

if (!element.attr(href)) {
    event.preventDefault();
}

जिसका मतलब है कि कोणीय पहले ही बिना किसी href के लिंक के मुद्दे को हल कर रहा है। आपके पास अभी भी एकमात्र समस्या सीएसएस समस्या है। आप एंकर को पॉइंटर स्टाइल लागू कर सकते हैं, जिसमें एनजी-क्लिक हैं, जैसे:

a[ng-click] {
    /* Styles for anchors without href but WITH ng-click */
    cursor: pointer;
}

तो, आप अपनी साइट को सूक्ष्म, विभिन्न स्टाइल के साथ वास्तविक लिंक को चिह्नित करके और अधिक सुलभ बना सकते हैं, फिर लिंक जो कार्य करते हैं।

हैप्पी कोडिंग!

Answer 25

आप उद्देश्य को प्राप्त करने के लिए $ स्थान के Html5Mode के अंदर url पुनर्निर्देशन को अक्षम कर सकते हैं। आप इसे पृष्ठ के लिए उपयोग किए गए विशिष्ट नियंत्रक के अंदर परिभाषित कर सकते हैं। कुछ इस तरह:

app.config(['$locationProvider', function ($locationProvider) {
    $locationProvider.html5Mode({
        enabled: true,
        rewriteLinks: false,
        requireBase: false
    });
}]);

Answer 26

यदि आप कोणीय 8 या अधिक का उपयोग कर रहे हैं तो आप एक निर्देश बना सकते हैं:

import { Directive, HostListener } from '@angular/core';

@Directive({
  selector: '[preventDefault]'
})
export class PreventDefaultDirective {

  @HostListener("click", ["$event"])
  public onClick(event: any): void
  {
    console.log('click');
    debugger;
      event.preventDefault();
  }

}

घटक पर अपने एंकर टैग पर आप इसे इस तरह से तार कर सकते हैं:

  <a ngbDropdownToggle preventDefault class="nav-link dropdown-toggle" href="#" aria-expanded="false" aria-haspopup="true" id="nav-dropdown-2">Pages</a>

ऐप मॉड्यूल में इसकी घोषणा होनी चाहिए:

import { PreventDefaultDirective } from './shared/directives/preventdefault.directive';


@NgModule({
  declarations: [
    AppComponent,
    PreventDefaultDirective

Answer 27

एक विकल्प हो सकता है:

<span ng-click="do()">Click</span>

Comments

spanउद्देश्यों को क्लिक करने के लिए दुर्व्यवहार करना भयानक अभ्यास है। बस hrefपरिभाषित किए बिना @ टेनिस के जवाब - एंकर के लिए जाएं ।

— रॉबिन वैन बालन

@RobinvanBaalen अवधि तत्व को कम से कम HTML 4.0.1 के बाद से क्लिक करने योग्य के रूप में परिभाषित किया गया है: w3.org/TR/html401/struct/global.html#edef-SPAN w3.org/TR/html5/dom5#global-attributes html.spec.whatwg.org/multipage/dom.html#global-attributes

— Terence Bandoian

यदि आप <span> नमस्कार </ span> करते हैं तो वह कब से क्लिक करने योग्य है? संभवतः क्या कहता है कि एक <span> एक क्लिक करने योग्य तत्व के अंदर इस्तेमाल किया जा सकता है जैसे कि <a> या <बटन>। लेकिन तब फिर से, सभी इनलाइन ब्लॉक एलिमेंट्स (img, span, etc) को क्लिक करने योग्य बनाया जा सकता है। एक अवधि ही क्लिक करने योग्य नहीं है।

— रॉबिन वैन बालन

@RobinvanBaalen कृपया ऊपर दिए गए लिंक देखें। कम से कम HTML 4.01 के बाद से स्पैन तत्वों के लिए ऑनक्लिक विशेषता को परिभाषित किया गया है।

— टेरेंस बंडोइयन

मैंने कभी नहीं कहा कि इवेंट हैंडलर जोड़ना एक अवधि के लिए काम नहीं करेगा। मैंने कहा कि जावास्क्रिप्ट इवेंट हैंडलर का उपयोग करके गैर-क्लिक करने योग्य तत्व जैसे स्पैन, डिव, सेक्शन, उल, ली, आदि को क्लिक करने योग्य बनाना बुरा है। यह सभी शब्दार्थों के बारे में है। HTML के भीतर शब्दार्थ उचित तत्व का उपयोग करके पृष्ठ अर्थ और संरचना पर सामग्री देने का अभ्यास है।

— रॉबिन वैन बालन