আমার যখন একটি লিঙ্ক থাকে যা কোনও jQuery বা জাভাস্ক্রিপ্ট ইভেন্টের সাথে তারযুক্ত থাকে যেমন:
<a href="#">My Link</a>আমি কীভাবে পৃষ্ঠায় শীর্ষে স্ক্রোলিং থেকে রোধ করব? আমি যখন নোঙ্গর থেকে href বৈশিষ্ট্যটি সরিয়ে ফেলি পৃষ্ঠাটি শীর্ষে স্ক্রোল করে না তবে লিঙ্কটি ক্লিক-সক্ষম বলে মনে হয় না।
উত্তর:
ক্লিক ইভেন্টের জন্য ডিফল্ট ক্রিয়াটি (যেমন লিংক টার্গেটে নেভিগেট করা) হওয়া থেকে আপনাকে রোধ করতে হবে।
এই কাজটি করার দুটি পদ্ধতি আছে।
event.preventDefault().preventDefault()আপনার হ্যান্ডলারের কাছে ইভেন্ট ইভেন্টটির পদ্ধতিটি কল করুন । আপনি যদি আপনার হ্যান্ডলারগুলিকে আবদ্ধ করতে jQuery ব্যবহার করেন তবে সেই ইভেন্টটি একটি উদাহরণ হতে পারে jQuery.Eventএবং এটি হবে jQuery সংস্করণ .preventDefault()। আপনি যদি addEventListenerআপনার হ্যান্ডলারগুলিকে আবদ্ধ করতে ব্যবহার করেন তবে এটির একটি Eventএবং কাঁচা ডিওএম সংস্করণ হবে .preventDefault()। যেভাবেই আপনার প্রয়োজন অনুযায়ী কাজ করবে।
উদাহরণ:
$('#ma_link').click(function($e) {
$e.preventDefault();
doSomething();
});
document.getElementById('#ma_link').addEventListener('click', function (e) {
e.preventDefault();
doSomething();
})
return false;JQuery এ :
ইভেন্ট হ্যান্ডলার থেকে মিথ্যা প্রত্যাবর্তন স্বয়ংক্রিয়ভাবে ইভেন্ট.স্টপপ্রপাগেশন () এবং ইভেন্ট.প্রিভেন্টডিফল্ট () কল করবে
সুতরাং, jQuery এর সাহায্যে আপনি ডিফল্ট লিঙ্ক আচরণটি রোধ করতে বিকল্পভাবে এই পদ্ধতিটি ব্যবহার করতে পারেন:
$('#ma_link').click(function(e) {
doSomething();
return false;
});
যদি আপনি কাঁচা ডিওএম ইভেন্টগুলি ব্যবহার করেন তবে এটি আধুনিক ব্রাউজারগুলিতেও কাজ করবে, যেহেতু এইচটিএমএল 5 স্পাই এই আচরণটি নির্দেশ করে। যাইহোক, ফটকের পুরানো সংস্করণগুলি তা করেনি, সুতরাং আপনার যদি পুরানো ব্রাউজারগুলির সাথে সর্বাধিক সামঞ্জস্যের প্রয়োজন হয়, আপনার .preventDefault()স্পষ্টভাবে কল করা উচিত । স্পষ্ট বিশদটির জন্য ইভেন্ট.প্রিভেন্টডেফল্ট () বনাম। প্রত্যাবর্তন মিথ্যা (কোনও জিকিউয়ারি নেই) দেখুন ।
আপনি আপনার href এর #!পরিবর্তে সেট করতে পারেন#
উদাহরণ স্বরূপ,
<a href="#!">Link</a>ক্লিক করার পরে কোনও স্ক্রোলিং করবে না।
সতর্ক থাকুন! এটি ক্লিক করার পরে এটি ব্রাউজারের ইতিহাসে এখনও একটি এন্ট্রি যুক্ত করবে, অর্থাত আপনার লিঙ্কটি ক্লিক করার পরে, ব্যবহারকারীর পিছনের বোতামটি সেগুলি পূর্বের পৃষ্ঠায় নিয়ে যাবে না। এই কারণে, .preventDefault()পদ্ধতির ব্যবহার করা বা উভয় সমন্বয় ব্যবহার করা ভাল।
এখানে একটি চিত্র বোঝানো হচ্ছে (আপনার স্ক্রোলবার না পাওয়া পর্যন্ত কেবল আপনার ব্রাউজারটি নীচে স্ক্রঞ্চ করুন):
http://jsfiddle.net/9dEG7/
এই আচরণটি একটি খণ্ড সনাক্তকারী অংশে নেভিগেটের অধীনে এইচটিএমএল 5 স্পেসে নির্দিষ্ট করা হয়েছে । একটি href এর সাথে একটি লিঙ্কটি "#"নথিকে শীর্ষে স্ক্রোল করার কারণ হ'ল এই আচরণটি খালি খণ্ড শনাক্তকারীকে হ্যান্ডেল করার উপায় হিসাবে স্পষ্টভাবে নির্দিষ্ট করা হয়েছে:
২. যদি
fragidখালি স্ট্রিং হয় তবে নথির নির্দেশিত অংশটি নথির শীর্ষে রয়েছে
"#!"পরিবর্তে একটি href ব্যবহার কেবল কারণ এটি এই নিয়ম এড়ায় কাজ করে। বিস্ময়বোধক চিহ্ন সম্পর্কে কোনও জাদু নেই - এটি কেবল একটি সুবিধাজনক খণ্ড শনাক্তকারী তৈরি করে কারণ এটি একটি সাধারণ ভঙ্গুর থেকে উল্লেখযোগ্যভাবে পৃথক এবং আপনার পৃষ্ঠায় কোনও উপাদান idবা nameএর সাথে কোনও মিলবে না unlikely প্রকৃতপক্ষে, আমরা হ্যাশের পরে প্রায় কোনও কিছু রাখতে পারি; কেবলমাত্র টুকরোগুলিই যথেষ্ট হবে না খালি স্ট্রিং, 'শীর্ষ' শব্দটি nameবা idপৃষ্ঠায় থাকা উপাদানগুলির বৈশিষ্ট্যগুলির সাথে মেলে এমন স্ট্রিং ।
আরও সঠিকভাবে, আমাদের কেবল একটি খণ্ড সনাক্তকারী প্রয়োজন যা ভঙ্গুর থেকে নথির নির্দেশিত অংশটি নির্ধারণের জন্য আমাদের নিম্নলিখিত অ্যালগরিদমে 8 ধাপে পড়তে বাধ্য করবে:
ইউআরএল-এ ইউএসএল পার্সার অ্যালগরিদম প্রয়োগ করুন এবং ফলাফলকে বিশ্লেষণকারী বিশ্লেষণকারী URL এর খণ্ড উপাদান হতে দিন ।
যদি
fragidখালি স্ট্রিং হয়, তবে নথির নির্দেশিত অংশটি নথির শীর্ষস্থানীয়; এখানে অ্যালগরিদম বন্ধ করুন।দিন
fragid bytesশতাংশ-ডিকোডিং ফলও হতেfragid।দিন
decoded fragidথেকে হল UTF-8 ডিকোডার অ্যালগরিদম প্রয়োগের ফলও হতেfragid bytes। যদি ইউটিএফ -8 ডিকোডারটি একটি ডিকোডার ত্রুটি প্রকাশ করে তবে ডিকোডারটি বাতিল করুন এবং তার পরিবর্তে লেবেলযুক্ত ধাপে ঝাঁপুনno decoded fragid।ডিওমে যদি এমন কোনও উপাদান থাকে যার আইডি ঠিক সমান হয়
decoded fragidতবে গাছের ক্রমে প্রথম এই জাতীয় উপাদানটি নথির নির্দেশিত অংশ; এখানে অ্যালগরিদম বন্ধ করুন।কোনও ডিকোডেড ভঙ্গুর নয় : যদি ডিওমে এমন একটি উপাদান রয়েছে যার নাম বৈশিষ্ট্য রয়েছে যার মান হুবহু
fragid( নাdecoded fragid) সমান , তবে গাছের ক্রমের ক্ষেত্রে এই জাতীয় উপাদানটি নথির নির্দেশিত অংশ; এখানে অ্যালগরিদম বন্ধ করুন।যদি ভঙ্গুর স্ট্রিংয়ের জন্য একটি ASCII কেস-সংবেদনশীল মিল
topহয় তবে নথির নির্দেশিত অংশটি নথির শীর্ষে রয়েছে; এখানে অ্যালগরিদম বন্ধ করুন।অন্যথায়, নথির কোনও নির্দেশিত অংশ নেই।
যতক্ষণ আমরা আট ধাপে আঘাত করি এবং নথির কোনও নির্দেশিত অংশ না পাওয়া যায় ততক্ষণ নিম্নলিখিত বিধিটি কার্যকর হয়:
যদি কোনও নির্দেশিত অংশ না থাকে ... তবে ব্যবহারকারী এজেন্ট অবশ্যই কিছু করবেন না।
যে কারণে ব্রাউজারটি স্ক্রোল করে না।
preventDefault()ক্লিক হ্যান্ডলারটি ব্যবহারের জন্য পছন্দসই বিকল্প নয় - বরং দুঃখের বিষয়।
একটি সহজ পদ্ধতির মাধ্যমে এই কোডটি লাভ করা যায়:
<a href="javascript:void(0);">Link Title</a>এই পদ্ধতিটি কোনও পৃষ্ঠা রিফ্রেশ করার জন্য বাধ্য করে না, তাই স্ক্রোলবারটি স্থানে থাকে। এছাড়াও, এটি আপনাকে প্রোগ্রামিকভাবে অনক্লিক ইভেন্টটি পরিবর্তন করতে এবং ক্লাসিক সাইড ইভেন্ট বন্ডিং jQuery ব্যবহার করে পরিচালনা করতে দেয়।
এই কারণে, উপরের সমাধানটি এর চেয়ে ভাল:
<a href="javascript:myClickHandler();">Link Title</a>
<a href="#" onclick="myClickHandler(); return false;">Link Title</a>
যেখানে মাই ক্লিকহ্যান্ডলার পদ্ধতিটি ব্যর্থ না হয় কেবলমাত্র যদি সর্বশেষ সমাধানটি স্ক্রল-জাম্প ইস্যুটি এড়াতে পারে।
আপনি যে কোডটি কল করছেন তার থেকে মিথ্যা প্রত্যাবর্তন কাজ করবে এবং বেশ কয়েকটি পরিস্থিতিতে পছন্দের পদ্ধতি তবে আপনি এটিও করতে পারেন
<a href="javascript:;">Link Title</a>যখন এটি এসইও আসে তখন এটি আপনার লিঙ্কটি কী ব্যবহার করা হবে তার উপর নির্ভর করে। আপনি যদি এটি অন্য কোনও সামগ্রীর সাথে লিঙ্ক করার জন্য এটি ব্যবহার করতে যাচ্ছেন তবে আমি সম্মত হব আপনি আদর্শভাবে এখানে কিছু অর্থবহ চান তবে আপনি যদি লিঙ্কটি কার্যকারিতা উদ্দেশ্যে ব্যবহার করছেন তবে স্ট্যাক ওভারফ্লু পোস্ট টুলবারের মতো (সাহসী, তির্যক, হাইপারলিঙ্ক) , ইত্যাদি) তাহলে সম্ভবত এটি কোনও ব্যাপার নয়।
আপনার পরিবর্তন করা উচিত
<a href="#">My Link</a>প্রতি
<a href="javascript:;">My Link</a>এই লিঙ্কটি ক্লিক করা হলে পৃষ্ঠা শীর্ষে স্ক্রোল করবে না। এটি href = "#" ব্যবহার করা এবং তারপরে ডিফল্ট ইভেন্টটি চালানো থেকে রোধ করার চেয়ে পরিষ্কার।
এই প্রশ্নের প্রথম উত্তরটিতে আমার এর পক্ষে ভাল কারণ রয়েছে , যেমন return false;ডাকা ফাংশনটি ত্রুটি ছুঁড়ে দিলে কার্যকর হবে না, বা আপনি return false;কোনও doSomething()ফাংশনে যুক্ত করতে পারেন এবং তারপরে ব্যবহার করতে ভুলে যেতে পারেনreturn doSomething();
আপনি যদি সহজেই hrefমানটি পরিবর্তন করতে পারেন তবে আপনার ব্যবহার করা উচিত:
<a href="javascript:void(0);">Link Title</a>আমি সবেমাত্র আরও একটি পরিষ্কার সমাধান নিয়ে এসেছি হ'ল ক্লিক ক্রিয়াকলাপ বন্ধ হতে এবং পৃষ্ঠাটি স্ক্রোলের দিকে রোধ করার জন্য jQuery ব্যবহার করা, তবে কেবল href="#"লিঙ্কগুলির জন্য ।
<script type="text/javascript">
/* Stop page jumping when links are pressed */
$('a[href="#"]').live("click", function(e) {
return false; // prevent default click action from happening!
e.preventDefault(); // same thing as above
});
</script>
return falseপরে হওয়া উচিত preventDefault(), অন্যথায় আপনি কখনও এই দ্বিতীয় লাইনে পাবেন না?
প্রথম স্থানে পৃষ্ঠার শীর্ষের চেয়ে আরও বুদ্ধিমান কিছুতে লিঙ্ক। তারপরে ডিফল্ট ইভেন্টটি বাতিল করুন।
ব্যবহারিক প্রগতিশীল বর্ধনের নিয়ম 2 দেখুন ।
আপনি সহজভাবে এটি লিখতে পারেন: -
<a href="#!" onclick="function()">Delete User</a>ফাংশনটি কল করার সময়, এটি return false
উদাহরণস্বরূপ অনুসরণ করুন :
<input type="submit" value="Add" onclick="addNewPayment();return false;">একটি পৃষ্ঠা তৈরি করুন যার দুটি লিঙ্ক রয়েছে - একটি উপরে এবং নীচে একটি লিঙ্ক। উপরের লিঙ্কটিতে ক্লিক করার পরে, পৃষ্ঠাটি নীচের পৃষ্ঠায় নীচে স্ক্রোল করতে হবে যেখানে নীচের লিঙ্কটি উপস্থিত রয়েছে। নীচের লিঙ্কটিতে ক্লিক করার পরে, পৃষ্ঠাটি পৃষ্ঠার শীর্ষে স্ক্রোল করতে হবে।
<a onclick="yourfunction()">এই ভাল কাজ করবে। href = "#" যুক্ত করার দরকার নেই
আপনি আপনার সিএসএস পরীক্ষা করতে চাইতে পারেন। উদাহরণ হিসাবে এখানে: https://css-tricks.com/the-checkbox-hack/ আছে position: absolute; top: -9999px;। এটি ক্রোমে বিশেষত বোকা, কারণ onclick="whatever"এখনও ক্লিক করা উপাদানের পরম অবস্থানটিতে ঝাঁপিয়ে পড়ে।
অপসারণ position: absolute; top: -9999px;, সাহায্যের জন্য display: none;।
ধসের জন্য বুটস্ট্র্যাপ 3 এর জন্য, আপনি যদি অ্যাঙ্কারে ডেটা-লক্ষ্য নির্দিষ্ট না করে এবং লক্ষ্য নির্ধারণের জন্য href এর উপর নির্ভর না করেন, ইভেন্টটি প্রতিরোধ করা হবে। আপনি যদি ডেটা-টার্গেট ব্যবহার করেন তবে আপনাকে নিজে ইভেন্টটি আটকাতে হবে।
<button type="button" class="btn btn-default" data-toggle="collapse" data-target="#demo">Collapse This</button>
<div id="demo" class="collapse">
<p>Lorem ipsum dolor sit amet</p>
</div>