অ্যাঙ্কর ট্যাগগুলিতে ডিফল্টকে কীভাবে প্রতিরোধ করবেন?

Question

ধরা যাক আমার কাছে একটি অ্যাঙ্কর ট্যাগ রয়েছে

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

অ্যাঙ্গুলারজেএস- এ ব্রাউজারটিকে # এ যাওয়াতে কীভাবে আমি আটকাতে পারি ?

Comments

ক্রিস নীচের মত বলেছে, ঠিক ছেড়ে দিন href।

— জেসি

ক্রিস যা বলে তা নয়, জেসি, href=''মাউস পয়েন্টার আচরণ রাখতে ব্যবহার করে।

— ওমা

আপনি কেবল href থেকে # চিহ্নটি সরিয়ে দিন, এটি ঠিক আছে।

— HENG Vongkol

অথবা কেবল href = "জাভাস্ক্রিপ্ট: অকার্যকর (0) ব্যবহার করুন;" পয়েন্টারটি রাখতে কিন্তু কোনও পদক্ষেপ নেই (যতক্ষণ না আপনি অন্য ক্লিক হ্যান্ডলার যোগ না করেন)

— রব্বা

আপনি কি দয়া করে ক্রিসের দ্বারা সর্বোত্তম এবং সর্বাধিক ভোটপ্রাপ্ত উত্তরটি পরিবর্তন করতে পারবেন - stackoverflow.com/a/11672909 ?

— পাইটর ডব্রোগস্ট

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কার্যনির্বাহী রয়েছে কিনা to যদি এটি এর মধ্যে কোনও শর্তাদি খুঁজে পায় তবে এটি ইভেন্টটি ধরে এবং ডিফল্ট আচরণকে বাধা দেয়।

একমাত্র নীচের দিকটি হ'ল এটি সমস্ত অ্যাঙ্কর ট্যাগের জন্য এই নির্দেশকে চালিত করে। সুতরাং পৃষ্ঠাটিতে যদি আপনার কাছে অনেকগুলি অ্যাঙ্কর ট্যাগ থাকে এবং আপনি কেবলমাত্র তাদের মধ্যে অল্প সংখ্যক জন্যই ডিফল্ট আচরণ রোধ করতে চান, তবে এই নির্দেশটি খুব কার্যকর নয়। যাইহোক, আমি প্রায় সবসময়ই চাই preventDefault, তাই আমি আমার অ্যাংুলারজেএস অ্যাপ্লিকেশনগুলিতে এই নির্দেশটি ব্যবহার করি।

Comments

ধন্যবাদ @ মেটেজক্র্যামনি, খুব গঠনমূলক সমালোচনা। এটিকে কম "অগোছালো" করার জন্য কোনও পরামর্শ?

— টেনিসেন্ট

অন্যান্য উত্তরে যেমন বলা হয়েছে, ফাঁকা hrefবৈশিষ্ট্য থাকা বিভিন্ন ব্রাউজারে বিভিন্ন রকম আচরণ করে। যদিও আমি সম্মতি দিচ্ছি যে এটি এখন পর্যন্ত সবচেয়ে পরিষ্কার এবং সবচেয়ে কার্যকর সমাধান, এতে কিছু ক্রস-ব্রাউজার সমস্যা রয়েছে। নির্দেশিক পদ্ধতির ব্যবহার ব্রাউজারটিকে <a>ট্যাগটি হ'ল সাধারনত হ্যান্ডেল করার সুযোগ দেয় তবে এখনও তারা ওপি উত্তরটি সন্ধান করে।

— টেনিসেন্ট

এটি কাজ করে এবং খুব সহজেই খুব সাধারণ সমস্যার জন্য ওভারকিল করে। কৌণিকটি আপনাকে ইভেন্ট ইভেন্টটিতে অ্যাক্সেস দিয়ে দেয় so যাতে আপনি সাধারণ জেএস বা জেকারি ক্লিক ইভেন্টগুলিতে ঠিক কী করতে পারেন। এই উত্তরটি দেখুন stackoverflow.com/a/19240232/1826354 এবং এটিতে আমার মন্তব্য

— চার্লি মার্টিন

হাঁ। আপনি পারেন। এই পোস্টে আরও দুটি উত্তর রয়েছে যা ইতিমধ্যে আপনি যা বর্ণনা করছেন তা করে। এবং আমি সম্মতি জানাই, এটি ওভারকিল। এজন্য আমি যে আপডেটটি করেছি তা করেছি।

— টেনিসেন্ট

আপনি যদি নিজের সাইটে অ্যাক্সেসযোগ্যতার বিষয়ে চিন্তা না করেন তবে এটি ঠিক আছে । Href ছেড়ে দিয়ে, আপনার কীবোর্ডটি আইটেমটিতে ট্যাব ব্যবহার করা সম্ভব নয়। আপনি যদি কোনও ট্যাবিনডেক্স না যোগ করেন। এই সমস্ত বিষয় মাথায় রেখে, কেন কেবলমাত্র প্রতিরোধ ডিফল্ট ব্যবহার করবেন না ...? এটাই তার জন্য সেখানে।

— দুহসেকোহ

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 বা নেটিভ ঘটনা প্রশ্নবিদ্ধ

— ভিনসেন্ট

এটা সঠিক উত্তর. আপনি <a> বৈশিষ্ট্য থেকে

— ক্রেডিট বাদ দিলে অ্যাঙ্গুলারজেএস

Href অ্যাট্রিবিউটটি ছেড়ে দেওয়ার একমাত্র নেতিবাচক দিকটি হ'ল কোনও লিঙ্কের উপরে ওঠার সময় আপনি সাধারণ 'পয়েন্টার' কার্সারটি হারাবেন। আপনি আপনার স্টাইলশিটে একটি বিধি যুক্ত করে এটি ঠিক করতে পারেন: ক: হোভার {কার্সার: পয়েন্টার; }

— কার্লগোল্ড

মনে রাখবেন যে এটি ট্যাগটিকে অ-ট্যাবযোগ্যও করে তোলে যা খুব অ্যাক্সেসযোগ্যতা বন্ধুত্বপূর্ণ নয়।

— রিচার্ড জাযালে

আমার জন্য ব্রাউজারটি এখনও ক্লিক অ্যাকশনটিকে বুদবুদ করে: /

— ম্যাটজ

Answer 3

আপনি আপনার পদ্ধতিতে $ ইভেন্ট অবজেক্টটি পাস করতে পারেন এবং $event.preventDefault()এটিতে কল করতে পারেন, যাতে ডিফল্ট প্রক্রিয়াজাতকরণ না ঘটে:

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

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

Comments

হ্যাঁ, এবং আপনি $ ইভেন্ট.স্টপপ্রপাগেশন () কল করতে পারেন যাতে ইভেন্টটি বুদবুদ না হয় (মূলত, ডাব্লু 3 সি দ্বারা সংজ্ঞায়িত ইভেন্ট অবজেক্টে আপনার অ্যাক্সেস থাকতে পারে: w3.org/TR/DOM-Level-2- ইভেন্ট / ইভেন্টগুলি html # ইভেন্টস-ইভেন্ট )

— এমএনএ

দয়া করে মনে রাখবেন সময়ে এই লেখা ছিল সূরা খালি (অথবা অনুপস্থিত) ছাড়ার করেনি না কাজ IE8 / 9 এবং অপেরা উপর। এটি এক বছর আগে ছিল এবং আমার আবার চেষ্টা করার সুযোগ হয়নি (আমি গিথুব-এর দিকে আবার একটি সমস্যা খুলেছি, তবে আমি মনে করি তারা কিছুকাল আগে বিষয়টি পুনরায় সেট করেছিলেন)। যদি এটি স্থির হয়ে থাকে (বা আপনি এই ব্রাউজারগুলির জন্য চিন্তা করেন না), তবে সব উপায়ে ক্রিসের উত্তরটি ব্যবহার করুন! যদি কেউ চেষ্টা করে দেখতে পারেন এবং উত্তর / মন্তব্য সম্পাদনা করতে পারেন, আরও ভাল।

— এমএনএ

@ পুয়েরকিটোবিও - আমি নিশ্চিত করতে পারি যে $event.preventDefault()আইই 8 এবং নীচে এখনও আইই ট্যাক্স প্রয়োজন।

— স্কটি ডট নেট

$ ইভেন্টটি নিয়ামককে স্থানান্তরিত করার অর্থ আপনার নিয়ামকটিতে DOM উল্লেখ করা, যার অর্থ আপনি নিজের দৃষ্টিভঙ্গি এবং আপনার নিয়ামককে একত্রিত করেছেন। আপনি সরাসরি আপনার মূল্যায়িত অভিব্যক্তিতে $ ইভেন্টের পদ্ধতিগুলি কল করতে পারেন: ng-click="do(); $event.preventDefault()উদাহরণস্বরূপ ... যদিও এটি প্রয়োজনীয় নয় কারণ নীচে @ ক্রিসের উত্তরটি সঠিক। এটি এমন পরিস্থিতিতে লোকগুলিকে সহায়তা করতে পারে যেখানে তারা এনজি-ক্লিকগুলিকে নেস্ট করেছে এবং তবে তারা কল করতে চায় $event.stopPropagation()।

— বেন লেশ

অবশেষে একটি এসইও বান্ধব সমাধান। আপনি এনজি-ভিউ পুনরায় লোড না করে ব্রাউজারের ইউআরএলও আপডেট করতে চাইতে পারেন - joelsaupe.com/programming/… এইভাবে আপনার লিঙ্কগুলি রয়েছে যা আপনার ভিউ পুনরায় লোড করে না তবে একটি নতুন ট্যাবে খোলা যেতে পারে এবং অনুসন্ধান ইঞ্জিনগুলি সেগুলি অনুসরণ করতে পারে। হ্যাঁ!

— টম

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. তোমার নিয়ামক আরো ইউনিট testable কারণ এটি আউট শহরের উপর অসম্পূর্ণ নিবন্ধ করার দরকার নেই $eventবস্তু

Comments

আমাদের জীবনকে সহজ করার জন্য @ ক্যাটো অ্যাঙ্গুলার তার নিজস্ব উপসেটটি jQuery এর সাথে আসে।

— নীল

অতিরিক্ত সুবিধা - এটি আপনার কাছে বিবেচিত হলে এটি IE8 এবং নীচেও কাজ করে।

— স্কটি ডট নেট

আমি হচ্ছি Error: $ is not defined। আমি কী মিস করছি?

— বিলাল মির্জা

চেষ্টা করেছি angular.element(element).bind('click', function(event){...});। এটা কাজ করেছে. রেফ: জেকিউএলাইট

— বিলাল মির্জা

এরকম সহজ কিছু জন্য দিকনির্দেশনা পরিচয় করিয়ে দেওয়া যদি আপনি আমাকে জিজ্ঞাসা করেন তবে কিছুটা ফুলে উঠেছে ... ক্রিসটি নীচে তার উত্তরটি দেখুন

— উইল্ট

Answer 5

যদিও রেনেউদ দুর্দান্ত সমাধান দিয়েছিলেন

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

কিছুটা পার্শ্ব প্রতিক্রিয়া এড়াতে আপনার ব্যক্তিগতভাবে আমারও দরকার $ ইভেন্ট.স্টপপ্রপাগেশন ()

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

আমার সমাধান হবে

Answer 6

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

Comments

এটিই সেরা সমাধান। অবশ্যই আপনি scope ইভেন্ট অবজেক্টটি আপনার স্কোপ ফাংশনেও পাস করতে পারেন। । Ng ক্লিকে = "myFunction ($ ইভেন্ট, otherParams) এবং তারপর $ মতো event.preventDefault () myFunction এই জন্য আপনার নিজের নির্দেশ ঘূর্ণায়মান Overkill হয়

— চার্লি মার্টিন

Answer 7

সবচেয়ে সহজ সমাধান আমি খুঁজে পেয়েছি এটি হ'ল:

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

Comments

এটি কেবল সবচেয়ে সহজ নয়, তবে এটি অন্যান্য সমাধানে প্রস্তাবিত কন্ট্রোলারের সাথে ঘটনাগুলির জুড়ি দেয় না। একটি নিয়ামকের সাথে ইভেন্টগুলির সংযোজন এমন একটি বিষয় যা আপনার যেকোন মূল্যে এড়ানো উচিত কারণ এটি পরীক্ষাকে অনেক বেশি শক্ত করে তোলে।

— jornare

Answer 8

সুতরাং এই উত্তরগুলি পড়ে, @ ক্রিসের এখনও সবচেয়ে "সঠিক" উত্তর রয়েছে, আমি মনে করি, তবে এটির একটি সমস্যা আছে, এটি "পয়েন্টার" দেখায় না ....

সুতরাং এখানে কার্সার যুক্ত না করেই এই সমস্যাটি সমাধান করার দুটি উপায় রয়েছে: পয়েন্টার শৈলী:

1. এর javascript:void(0)পরিবর্তে ব্যবহার করুন #:

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

2. ব্যবহারের $event.preventDefault()মধ্যে ng-clickডিরেক্টিভের (তাই আপনি DOM সংক্রান্ত রেফারেন্স সঙ্গে আপনার নিয়ামক আপ আবর্জনা না):

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

ব্যক্তিগতভাবে আমি আগেরটির চেয়ে পূর্বেরটিকে পছন্দ করি। javascript:void(0)অন্যান্য সুবিধাগুলি রয়েছে যা এখানে আলোচনা করা হয়েছে । সেই লিঙ্কটিতে "উদ্বেগহীন জাভাস্ক্রিপ্ট" নিয়েও আলোচনা রয়েছে যা ভীতিজনকভাবে সাম্প্রতিক, এবং অগত্যা সরাসরি কৌণিক প্রয়োগে প্রয়োগ হয় না।

Comments

কেন এই নিম্নমানের? আমি আরও লক্ষ্য করেছি যে ক্রিসের উত্তর দিয়ে পয়েন্টারটি প্রদর্শিত হচ্ছে না।

— উইম দেবলাউয়ে

জাভাস্ক্রিপ্ট: অকার্যকর (0) # এর চেয়ে অনেক ভাল যা আপনি যদি এটির কনফিগার করেন তবে রুটে কাজ করতে পারে। +1

— শে এলকায়াম

আমি এই সম্পর্কে একটি উত্তর লিখতে চলেছিলাম। আপনিও করতে পারেনjavascript:;

— অ্যাড্রিয়ান

Answer 9

আপনি নিম্নলিখিত হিসাবে করতে পারেন

1. hrefঅ্যাঙ্কর থেকে বৈশিষ্ট্য সরান (a ) ট্যাগ

সিএসএসে পয়েন্টার কার্সার সেট করুন উপাদানগুলিকে এনজি করতে

 [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

যেহেতু ওয়েইন ওয়েবপ্যাজে অ্যাঙ্কর থাকতে পারে না?

— রবিন ভ্যান বালেন

আমি সেই পয়েন্টটি উল্লেখ করছিলাম যে বেশিরভাগ ওয়েব-অ্যাপ্লিকেশনকে ওয়েবসাইটের মতো আপেক্ষিক লিঙ্কের প্রয়োজন হয় না, তারা প্রায়শই জাভাস্ক্রিপ্ট ট্রিগার হিসাবে অ্যাঙ্কর লিঙ্কগুলি ব্যবহার করে এবং কোনও পৃষ্ঠায় লিঙ্ক না করে; অতএব, ডিফল্ট স্টাইল রিসেট সহ একটি বোতাম ঠিক ততটুকু সঠিকভাবে যদি সঠিক না হয়।

— সিডোনাল্ডসন

@ সিডোনাল্ডসন আসলে, আজকাল প্রচুর ওয়েব-অ্যাপ্লিকেশনগুলি লিঙ্কগুলির উপর নির্ভর করে av অ্যাংুলারজ রাউটিংটি দেখুন।

— রবার্ট

@ রবার্ট হ্যাঁ তবে আপনি যদি রাউটিংয়ে বিল্টটি ব্যবহার করেন তবে আপনাকে ডিফল্ট প্রতিরোধ পরিচালনা করতে হবে না, এটি আপনার পক্ষে হয়ে গেছে। আমি ধরে নিয়েছি যেহেতু পোস্টার কোনও অ্যাঙ্কর লিঙ্কটি বাতিল করতে চায় যে সে নন-রুট লিঙ্কগুলির বিষয়ে কথা বলছে। উদাহরণস্বরূপ একটি

— মডেল

এই উত্তরের আরও অনেকগুলি উর্ধ্বমুখী হওয়া উচিত। অনেক ক্ষেত্রে, আপনি যদি ডিফল্ট অ্যাঙ্কর আচরণটি আটকাতে চান তবে আপনি অ্যাঙ্করটিকে বোতাম হিসাবে ব্যবহার করছেন, কোনও লিঙ্ক নয়।

— ইটসকসো

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 ছাড়তে সক্ষম হওয়া উচিত এবং তারপরে অ্যাঙ্গুলার আপনার জন্য প্রতিরোধ ডিফল্টটি পরিচালনা করবে!

পুরো এই প্রতিরোধ ডিফল্ট জিনিসটি আমার কাছে বিভ্রান্তিকর হয়ে পড়েছে, তাই আমি একটি জেএসফিটাল তৈরি করেছি যেখানে চিত্রিত হয়েছে কখন এবং কোথায় অ্যাংুলার ডিফল্টকে আটকাচ্ছে ।

জেএসফিডাল অ্যাংুলারকে একটি নির্দেশিকা ব্যবহার করছে - সুতরাং এটি অবশ্যই একই রকম হওয়া উচিত। আপনি এখানে সোর্স কোড দেখতে পারেন: একটি ট্যাগ উত্স কোড

আমি আশা করি এটি কারওর জন্য স্পষ্ট করতে সহায়তা করবে।

আমি এনজিআরএফের কাছে ডকটি পোস্ট করতে পছন্দ করতাম তবে আমার খ্যাতির কারণে আমি তা করতে পারি না।

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

প্রচুর উত্তর ওভারকিল বলে মনে হচ্ছে। আমার জন্য, এটি কাজ করে

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

Answer 19

অবক্ষয়ের জন্য আমার href অ্যাট্রিবিউটর মানটির উপস্থিতি প্রয়োজন (যখন জেএস বন্ধ করা থাকে), তাই আমি খালি href অ্যাট্রিবিউট (বা "#") ব্যবহার করতে পারি না, তবে উপরের কোডটি আমার পক্ষে কাজ করে না, কারণ আমার একটি ইভেন্টের প্রয়োজন ( e) পরিবর্তনশীল। আমি আমার নিজস্ব নির্দেশ তৈরি করেছি:

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

এইচটিএমএলে:

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

Answer 20

টেনিসেন্টের উত্তর থেকে .ণ নেওয়া। আমি পছন্দ করি যে আপনাকে সমস্ত লিঙ্কে যুক্ত করার জন্য কাস্টম নির্দেশিকা তৈরি করতে হবে না। তবে আমি তাকে আইই 8 তে কাজ করতে পারি না get অবশেষে আমার জন্য কী কাজ করেছে তা এখানে রয়েছে (কৌনিক 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

আপনি যদি কখনও হেরেফে যেতে না চান ... আপনার মার্কআপটি পরিবর্তন করা উচিত এবং অ্যাঙ্কর ট্যাগ নয় এমন একটি বোতাম ব্যবহার করা উচিত কারণ শব্দার্থগতভাবে এটি কোনও অ্যাঙ্কর বা কোনও লিঙ্ক নয়। বিপরীতভাবে যদি আপনার কাছে এমন কিছু বোতাম থাকে যা কিছু পরীক্ষা করে থাকে এবং তারপরে পুনঃনির্দেশ করে তবে এটি SEO এর উদ্দেশ্যে পরীক্ষার জন্য এখানে পরীক্ষার স্যুট প্রবেশ করুন] লিংক / অ্যাঙ্কর ট্যাগ এবং একটি বোতাম নয়।

যে লিঙ্কগুলির জন্য আপনি কেবল শর্তাধীনভাবে পরিবর্তনগুলি সংরক্ষণ করার অনুরোধ জানাতে বা নোংরা অবস্থা স্বীকার করার মতো পুনঃনির্দেশ করতে চান ... আপনার এনজি-ক্লিক = "কিছু ফাংশন ($ ইভেন্ট)" ব্যবহার করা উচিত এবং আপনার বৈধতার কিছুটা ফাংশনে অরর রোধক ডিফল্ট এবং বা স্টপপ্রোপেশন।

এছাড়াও কেবল কারণ আপনার অর্থ হওয়া উচিত নয় । জাভাস্ক্রিপ্ট: অকার্যকর (0) দিনের খুব ভাল কাজ করেছিল ... তবে নেফেরিয়াস হ্যাকার / ক্র্যাকার্স ব্রাউজারগুলি ফ্ল্যাশ অ্যাপস / সাইটগুলির জন্য যা একটি href এর মধ্যে জাভাস্ক্রিপ্ট ব্যবহার করে ... উপরের হাঁস টাইপ করার কোনও কারণ দেখুন না ..

২০১০ এর পর থেকে ২০১০ এর বোতামগুলির মতো কাজ করে এমন লিঙ্কগুলি ব্যবহার করার কোনও কারণ নেই ... যদি আপনার এখনও আইই 8 সমর্থন করতে হয় এবং নীচে আপনার ব্যবসায়ের স্থানটি পুনরায় মূল্যায়ন করতে হবে।

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 - 31 রেখায় উল্লেখ করেছে:

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

যার অর্থ অ্যাংুলার ইতিমধ্যে কোনও href ছাড়াই লিঙ্কগুলির সমস্যা সমাধান করছে। আপনার কাছে এখনও একমাত্র সমস্যা হ'ল সিএসএস সমস্যা। আপনি এখনও এনজি-ক্লিক রয়েছে এমন অ্যাঙ্করগুলিতে পয়েন্টার স্টাইল প্রয়োগ করতে পারেন, যেমন:

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

সুতরাং, আপনি সূক্ষ্ম, বিভিন্ন স্টাইলিং এর সাথে ফাংশন সম্পাদনকারী লিঙ্কগুলির সাথে বাস্তব লিঙ্কগুলি চিহ্নিত করে এমনকি আপনার সাইটটিকে আরও অ্যাক্সেসযোগ্য করে তুলতে পারেন।

শুভ কোডিং!

Answer 25

আপনি উদ্দেশ্যটি অর্জন করতে $ অবস্থানের এইচটিএমএল 5 মডেলের ভিতরে 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সংজ্ঞায়িত না হয়ে অ্যাঙ্করগুলি ।

— রবিন ভ্যান বালেন

@ রবিনওয়ানবালেেন স্প্যান উপাদানটি কমপক্ষে এইচটিএমএল ৪.০.১ থেকে wable.org হিসাবে ক্লিকযোগ্য হিসাবে সংজ্ঞায়িত হয়েছে: w3.org/TR/html401/struct/global.html#def-SPAN w3.org/TR/html5/dom.html#global-attributes এইচটিএমএল.স্পেক.সেটওয়গ.আর.

— টেরেন্স ব্যান্ডোইয়ান

আপনি যদি <span> হ্যালো </ span> করেন তবে এটি কখন ক্লিকযোগ্য? অনুমানটি যা বলে সম্ভবত তা হ'ল <span> ক্লিকযোগ্য উপাদান যেমন <a> বা <বাটন> এর ভিতরে ব্যবহার করা যেতে পারে। তবে তারপরে, সমস্ত ইনলাইন ব্লক উপাদান (img, স্প্যান, ইত্যাদি) সেভাবে ক্লিকযোগ্য হতে পারে। একটি স্প্যান নিজেই ক্লিকযোগ্য নয়।

— রবিন ভ্যান বালেন 22'15

নিবন্ধটি দেখুন স্প্যান উপাদানগুলির জন্য অনক্লিক বৈশিষ্ট্যটি কমপক্ষে এইচটিএমএল 4.01 থেকে সংজ্ঞায়িত করা হয়েছে।

— টেরেন্স ব্যান্ডোইয়ান

আমি কখনও বলিনি যে ইভেন্ট হ্যান্ডলার যুক্ত করা স্প্যানের জন্য কাজ করবে না। আমি বলেছিলাম জাভাস্ক্রিপ্ট ইভেন্ট হ্যান্ডলার ব্যবহার করে স্প্যান, ডিভ, বিভাগ, উল, লি ইত্যাদির মতো ক্লিকযোগ্য নয় এমন উপাদান তৈরি করা খারাপ অভ্যাস। এটি সব শব্দার্থবিজ্ঞানের কথা। এইচটিএমএল-এর মধ্যে শব্দার্থবিজ্ঞান হ'ল সঠিক উপাদানটি ব্যবহার করে পৃষ্ঠার অর্থ এবং কাঠামোতে সামগ্রী সরবরাহ করার অনুশীলন।

— রবিন ভ্যান বালেন