Href বনাম অনক্লিক জাভাস্ক্রিপ্ট ফাংশন

Question

আমি কোনও পুনঃনির্দেশ ছাড়াই একটি ক্লিকে একটি সাধারণ জাভাস্ক্রিপ্ট ফাংশন চালাতে চাই।

জাভাস্ক্রিপ্ট কলটি hrefঅ্যাট্রিবিউটে রাখার মধ্যে কি কোনও পার্থক্য বা সুবিধা রয়েছে (যেমন:

<a href="javascript:my_function();window.print();">....</a>

) বনাম। এটি onclickএট্রিবিউট স্থাপন করা ( onclickইভেন্টে এটি আবদ্ধ )?

Comments

এই প্রশ্নটি আগে আলোচনা করা হয়েছে: স্ট্যাকওভারফ্লো.com/

— সমাধান

এবং স্ট্যাকওভারফ্লো.com

— সাম্পসন

Answer 1

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

আজকালকার সাধারণ পথটি একটি জাভাস্ক্রিপ্ট লাইব্রেরি (উদাহরণস্বরূপ jquery) ব্যবহার করা এবং সেই লাইব্রেরিটি ব্যবহার করে ইভেন্ট হ্যান্ডলার তৈরি করা। এটি দেখতে কিছু হবে:

$('a').click( function(e) {e.preventDefault(); /*your_code_here;*/ return false; } );

Comments

অথবা জাভাস্ক্রিপ্টে মুটুলগুলি, প্রোটোটাইপ, ডোজো ... বা প্লেইন, তবে এটি পুরোপুরি আরও অনেক কোড হতে পারে তবে বিশদ বিবরণটি মূল্যবান।

— রায়ান ফ্লোরেন্স 19

ইভেন্ট ইভেন্টের সাথে যদি আপনার কিছু না করতে হয় তবে প্লেইন জাভাস্ক্রিপ্টটি বেশ সহজ। আপত্তি = ডকুমেন্ট.জেট এলিমেন্টবাইআইডি () দিয়ে ডোম নোড পান, তারপরে obj.onclick = foo সেট করুন

— ম্যাট ব্রিজ ১৯

<a href> যখন ফ্লাইতে উত্পন্ন হয়, একটি পপআপ উইন্ডোতে বলুন এবং আপনার এখনও একটি বিশেষ ক্লিকের আচরণের প্রয়োজন আছে তখন বিষয়বস্তুর বিভাজন সম্পর্কে কী বলা যায়?

— সার্জ করুন

তবে প্রশ্নটি জেএস কলকে ইনলাইন hrefবনাম ইনলাইন স্থাপনের মধ্যে পার্থক্য সম্পর্কে জিজ্ঞাসা করছে না onclick? ধরে নিচ্ছি আপনি কোনও কারণে এটি ইনলাইন রেখে যাচ্ছেন, আপনার কোনটি ব্যবহার করা উচিত? (

— বাস্তবে

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

— মিস্টিডন

Answer 2

খারাপ:

<a id="myLink" href="javascript:MyFunction();">link text</a>

ভাল:

<a id="myLink" href="#" onclick="MyFunction();">link text</a>

উত্তম:

<a id="myLink" href="#" onclick="MyFunction();return false;">link text</a>

আরও ভাল 1:

<a id="myLink" title="Click to do something"
 href="#" onclick="MyFunction();return false;">link text</a>

আরও ভাল 2:

<a id="myLink" title="Click to do something"
 href="PleaseEnableJavascript.html" onclick="MyFunction();return false;">link text</a>

কেন ভাল? কারণ return falseব্রাউজারটি লিঙ্কটি অনুসরণ করা থেকে বিরত করবে

সেরা:

উপাদানটির আইডি দ্বারা অন্লিক হ্যান্ডলার সংযুক্ত করতে jQuery বা অন্যান্য অনুরূপ কাঠামো ব্যবহার করুন।

$('#myLink').click(function(){ MyFunction(); return false; });

Comments

এর জন্য আরও একটি সমাধান থাকবে যা সেরা হবে যেখানে hrefসেট করা নেই #তবে NoJS ব্রাউজারগুলির জন্য একটি আসল লিঙ্কে রয়েছে।

— helly0d

আমি যদি আপনাকে বলি যে মিডিলেক্লিক সহ সমস্ত ব্রাউজারে প্রথম (খারাপ) এক একই (ডান) পথে কাজ করে।

— ভ্লোগোসিটিসিটি

<a id="myLink" href="javascript:MyFunction() ;"> সম্পর্কে কী খারাপ?

— ভাদাদাদি কার্তিক

কেবল আমার নম্র 5 সেন্ট: "সর্বোত্তম" বিকল্পটি হবে ক্লিকের জন্য বোতামগুলি ব্যবহার করা (অনক্লিক ইভেন্টগুলি?) এবং অ্যাঙ্করগুলি তাদের হ্রেফের সাথে রেখেছিল যে তাদের আসল নকশাটির উদ্দেশ্যটি প্রথম স্থানে ছিল: অন্য পৃষ্ঠাগুলির লিঙ্কগুলির জন্য অ্যাঙ্কর হতে হবে।

— নিডালপ্রেস

জাভাস্ক্রিপ্টের সাথে ক্লিক করার জন্য বাইন্ডিংটির একটি ডাউনসাইড রয়েছে: পরে যখন আপনি তার ফর্মটি অন্য কাউকে ডিবাগ করছেন তখন কোথায় এবং কী ধরণের জাভাস্ক্রিপ্ট সেই উপাদানটির সাথে আবদ্ধ তা খুঁজে পাওয়া সত্যিই কঠিন।

— মার্টেন কিফট

Answer 3

নিরিখে জাভাস্ক্রিপ্ট , এক পার্থক্য যে thisমধ্যে শব্দ onclickহ্যান্ডলার DOM উপাদান যার পড়ুন হবে onclickঅ্যাট্রিবিউট এটা (এই ক্ষেত্রে হয় <a>উপাদান) যেহেতু thisমধ্যে hrefঅ্যাট্রিবিউট পড়ুন হবে windowঅবজেক্ট।

নিরিখে উপস্থাপনা , যদি একটি hrefঅ্যাট্রিবিউট একটি লিঙ্ক (অর্থাত থেকে অনুপস্থিত <a onclick="[...]">) তারপর, ডিফল্টরূপে, ব্রাউজার প্রদর্শন করা হবে textকার্সার (এবং প্রায়ই-আকাঙ্ক্ষিত pointerকার্সার) যেহেতু এটি চিকিত্সা করা হয় <a>একটি নোঙ্গর হিসেবে এবং না একটি লিংক।

নিরিখে আচরণ , যখন মাধ্যমে নেভিগেশনের দ্বারা একটি কর্ম উল্লেখ href, ব্রাউজার সাধারণত খোলার যে সমর্থন করবে hrefএকটি পৃথক উইন্ডোতে পারেন একটি শর্টকাট বা প্রসঙ্গ মেনু ব্যবহার করে। কেবলমাত্র মাধ্যমে কোনও ক্রিয়া নির্দিষ্ট করার সময় এটি সম্ভব হয় না onclick।

---

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

<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<a id="link" href="http://example.com/action">link text</a>
<script type="text/javascript">
    $('a#link').click(function(){ /* ... action ... */ })
</script>

Comments

আমার সন্দেহটি নিশ্চিত করার জন্য ধন্যবাদ যে "এই" "হরেফ" বনাম "অনক্লিক" এর চেয়ে আলাদা।

— junas.fi

Answer 4

আমি ব্যবহার করি

Click <a nohref style="cursor:pointer;color:blue;text-decoration:underline"
onClick="alert('Hello World')">HERE</a>

অনেক দীর্ঘ পথ কিন্তু এটি কাজটি সম্পন্ন করে। সরল করার জন্য একটি স্টাইল ব্যবহার করুন তবে তা হয়ে যায়:

<style> A {cursor:pointer;color:blue;text-decoration:underline; } </style> 
<a nohref onClick="alert('Hello World')">HERE</a>

Comments

+1 সত্যিই দুর্দান্ত! :-) আমি আগে কখনও nohrefগুণাবলী সম্পর্কে শুনিনি about এই জাতীয় জাভাস্ক্রিপ্ট ক্রিয়া পরিচালনা করার জন্য এটি সবচেয়ে লজিক্যাল / মার্জিত উপায়। এটি FF12 এবং IE8 এর সাথে সামঞ্জস্যপূর্ণ। অতএব, আমি আমার সমস্ত প্রতিস্থাপন করবে href="JavaScript:void(0);"দ্বারা nohref। অনেক ধন্যবাদ. চিয়ার্স।

— অলিবরে

এটি প্রধান ব্রাউজার দ্বারা সমর্থিত নয়, কেন আমরা এটি ব্যবহার করব? w3schools.com/tags/att_area_nohref.asp

— হেটাওব্লগ

nohrefareaট্যাগের একটি অংশ , না a! আপনার উদাহরণটি একই<a onClick="alert('Hello World')">HERE</a>

— nZeus

অন্য একজন "এই সতর্কতাটি করবেন না"। এটি সম্পূর্ণ অ-মানক এবং খারাপ পরামর্শ। nohrefএকটি aট্যাগ নেই।

— কলিন 't হার্ট

Answer 5

এখানে সমস্ত কিছু ছাড়াও, ব্রাউজারের স্ট্যাটাস বারে href দেখানো হয়, এবং ক্লিক না করে। আমি মনে করি সেখানে জাভাস্ক্রিপ্ট কোড দেখানো ব্যবহারকারীর পক্ষে উপযুক্ত নয়।

Answer 6

এটি করার সর্বোত্তম উপায়টি হ'ল:

<a href="#" onclick="someFunction(e)"></a>

সমস্যাটি হ'ল এই ব্রাউজারে পৃষ্ঠার ইউআরএলটির শেষে একটি হ্যাশ (#) যুক্ত করবে, এভাবে আপনার পৃষ্ঠায় যাওয়ার জন্য ব্যবহারকারীকে দু'বার পিছনে বোতামটি ক্লিক করতে হবে। এটি বিবেচনা করে, ইভেন্টের প্রচার বন্ধ করতে আপনাকে কিছু কোড যুক্ত করতে হবে। বেশিরভাগ জাভাস্ক্রিপ্ট টুলকিট এর জন্য ইতিমধ্যে একটি ফাংশন থাকবে। উদাহরণস্বরূপ, ডোজো টুলকিট ব্যবহার করে

dojo.stopEvent(event);

তাই না.

Comments

আমি সতর্ক করতে চাই যে আপনি যদি href="#"ব্রাউজারটি ব্যবহার করেন তবে এটি একটি নামযুক্ত অ্যাঙ্কর ট্যাগটি সন্ধান করবে এবং যেহেতু এটি এটি খুঁজে পাবে না, তবে এটি উইন্ডোটিকে পৃষ্ঠার শীর্ষে স্ক্রোল করতে সক্ষম করবে, এটি এমন কিছু যা লক্ষণীয় নাও হতে পারে আপনি ইতিমধ্যে শীর্ষে আছেন। এই আচরণটি এড়াতে ব্যবহার করুন: href="javascript:;"পরিবর্তে।

— alonso.torres

@ অ্যালনসো.টোরেস ভাল পয়েন্ট, তবে সে কারণেই আমি dojo.stopEvent () ব্যবহারের কথা উল্লেখ করেছি - এটি ইভেন্টের প্রচার / বুদবুদ এবং অ্যাঙ্কারে ক্লিক করার ডিফল্ট আচরণ বন্ধ করবে।

— linusthe3rd

স্টপএভেন্টের পরিবর্তে, কেন কেবল মিথ্যা (অন্লিক = "কিছু ফাংশন (ই); মিথ্যা প্রত্যাবর্তন করুন;") ফিরে

— আসছেন না

Answer 7

শীর্ষের উত্তরটি একটি খুব খারাপ অভ্যাস, রাস্তায় সমস্যা তৈরি করতে পারে এমন কারও কখনও কখনও খালি হ্যাশের সাথে লিঙ্ক করা উচিত নয়।

ইভেন্টের হ্যান্ডলারকে উপাদানটির সাথে বেঁধে রাখাই সেরা হ'ল অন্যান্য অসংখ্য ব্যক্তি যেমন বলেছেন, <a href="javascript:doStuff();">do stuff</a> প্রতিটি আধুনিক ব্রাউজারে পুরোপুরি কাজ করে এবং প্রতিটি উদাহরণের জন্য পুনরায় প্রত্যাবর্তন করতে না পারা টেমপ্লেটগুলি রেন্ডার করার সময় আমি এটি ব্যাপকভাবে ব্যবহার করি। কিছু ক্ষেত্রে, এই পদ্ধতির আরও ভাল পারফরম্যান্স উপলব্ধ। YMMV

আর একটি আকর্ষণীয় সংবাদ ...

onclick & href সরাসরি জাভাস্ক্রিপ্ট কল করার সময় বিভিন্ন আচরণ আছে।

onclickthisপ্রসঙ্গটি সঠিকভাবে পাস করবে , যেখানে hrefহবে না বা অন্য কথায় <a href="javascript:doStuff(this)">no context</a>কাজ করবে না, তবে<a onclick="javascript:doStuff(this)">no context</a> হবে।

হ্যাঁ, আমি বাদ দেওয়া href। যদিও এটি অনুমান অনুসরণ করে না, এটি সমস্ত ব্রাউজারে কাজ করবে, যদিও আদর্শভাবে এটি href="javascript:void(0);"ভাল পরিমাপের জন্য অন্তর্ভুক্ত করা উচিত

Answer 8

জমিদারি javascript: কোন গুণ যা স্ক্রিপ্টিং জন্য বিশেষভাবে নয় HTML- এর একটি পুরানো পদ্ধতি। প্রযুক্তিগতভাবে এটি কাজ করার সময়, আপনি এখনও জাভাস্ক্রিপ্ট বৈশিষ্ট্যগুলি একটি নন-স্ক্রিপ্ট বৈশিষ্ট্যের জন্য বরাদ্দ করছেন, যা ভাল অনুশীলন নয়। এটি পুরানো ব্রাউজারগুলিতে এমনকি কিছু আধুনিক পোস্টেও ব্যর্থ হতে পারে (গুগলযুক্ত ফোরামের পোস্টটি ইঙ্গিত দেয় যে অপেরা 'জাভাস্ক্রিপ্ট:' ইউআরএল পছন্দ করে না)।

আরও ভাল অনুশীলন onclickহ'ল দ্বিতীয় উপায়, আপনার জাভাস্ক্রিপ্টকে বৈশিষ্ট্যে রাখুন, যা যদি কোনও স্ক্রিপ্টিং কার্যকারিতা উপলব্ধ না হয় তবে তা অগ্রাহ্য করা হয়। যাদের জাভাস্ক্রিপ্ট নেই তাদের ফ্যালব্যাকের জন্য href ক্ষেত্রে একটি বৈধ URL (সাধারণত '#') রাখুন।

Comments

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

— হার্টো

হার্টো, এটি আসলে সঠিক নয়। '#' নামযুক্ত লিঙ্কের জন্য একটি সূচক, এটি জাভাস্ক্রিপ্ট শনাক্তকারী নয়। এটি একটি বৈধ ইউআরএল, এবং জাভাস্ক্রিপ্ট স্বীকৃত হওয়ার প্রয়োজন নেই।

— জুমব্যাট

Answer 9

কোডের এই লাইনটি ব্যবহার করে এটি আমার পক্ষে কাজ করেছে:

<a id="LinkTest" title="Any Title"  href="#" onclick="Function(); return false; ">text</a>

Answer 10

এইটা কাজ করে

<a href="#" id="sampleApp" onclick="myFunction(); return false;">Click Here</a>

Comments

স্ট্যাক ওভারফ্লোতে স্বাগতম! যদিও এই কোড স্নিপেট একটি ব্যাখ্যা সহ প্রশ্নটি সমাধান করতে পারে, সত্যিই আপনার পোস্টের মান উন্নত করতে সহায়তা করে। মনে রাখবেন যে আপনি ভবিষ্যতে পাঠকদের জন্য প্রশ্নের উত্তর দিচ্ছেন, এবং সেই লোকেরা আপনার কোড পরামর্শের কারণগুলি জানেন না। আপনার কোডটি ব্যাখ্যামূলক মন্তব্যে ভিড় না করার চেষ্টা করুন, কারণ এটি কোড এবং ব্যাখ্যা উভয়ের পাঠযোগ্যতা হ্রাস করে!

— বিদায় স্ট্যাক এক্সচেঞ্জ

এই কোডটি কাজ করে না। প্রত্যাবর্তন: মিথ্যা অবৈধ। এটি মিথ্যা প্রত্যাবর্তন করা উচিত।

— hbulens

Answer 11

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

Answer 12

জাভাস্ক্রিপ্ট সহ "href" ব্যবহার করার সময় আমি আরও একটি জিনিস লক্ষ্য করেছি:

2 টি ক্লিকের মধ্যে সময়ের পার্থক্যটি খুব কম হলে "href" বৈশিষ্ট্যের স্ক্রিপ্টটি কার্যকর করা হবে না।

উদাহরণস্বরূপ, নিম্নলিখিত উদাহরণটি চালানোর চেষ্টা করুন এবং প্রতিটি লিঙ্কে ডাবল ক্লিক (দ্রুত!) প্রথম লিঙ্কটি একবারেই কার্যকর করা হবে। দ্বিতীয় লিঙ্কটি দুইবার কার্যকর করা হবে।

<script>
function myFunc() {
    var s = 0;
    for (var i=0; i<100000; i++) {
        s+=i;
    }
    console.log(s);
}
</script>
<a href="javascript:myFunc()">href</a>
<a href="#" onclick="javascript:myFunc()">onclick</a>

ক্রোমে পুনরায় উত্পাদিত (ডাবল ক্লিক) এবং আইই ১১ (ট্রিপল ক্লিক সহ)। Chrome এ আপনি যদি দ্রুত পর্যাপ্ত ক্লিক করেন তবে আপনি 10 টি ক্লিক করতে পারেন এবং কেবলমাত্র 1 টি কার্য সম্পাদন করতে পারেন।

ফায়ারফক্স ঠিক আছে কাজ করে।

Answer 13

প্রথমত, ইউআরএল থাকা hrefসবচেয়ে ভাল কারণ এটি ব্যবহারকারীদের লিঙ্কগুলি অনুলিপি করতে, অন্য ট্যাবে খোলার অনুমতি দেয় etc.

কিছু ক্ষেত্রে (যেমন ঘন ঘন এইচটিএমএল পরিবর্তিত সাইটগুলি) প্রতিবার আপডেট থাকাকালীন লিঙ্কগুলি বাঁধাই ব্যবহারিক নয়।

সাধারণ বাঁধাইয়ের পদ্ধতি

সাধারণ লিঙ্ক:

<a href="https://www.google.com/">Google<a/>

এবং জেএস এর পক্ষে এরকম কিছু:

$("a").click(function (e) {
    e.preventDefault();
    var href = $(this).attr("href");
    window.open(href);
    return false;
});

এই পদ্ধতির সুবিধা হ'ল মার্কআপ এবং আচরণের পরিষ্কার বিচ্ছিন্নতা এবং প্রতিটি লিঙ্কে ফাংশন কলগুলি পুনরাবৃত্তি করতে হবে না।

কোন বাইন্ড পদ্ধতি নেই

আপনি যদি প্রতিবার বাঁধাই করতে না চান তবে আপনি অন্লিক ব্যবহার করতে পারেন এবং উপাদান এবং ইভেন্টে পাস করতে পারেন, যেমন:

<a href="https://www.google.com/" onclick="return Handler(this, event);">Google</a>

এবং এটি জেএসের জন্য:

function Handler(self, e) {
    e.preventDefault();
    var href = $(self).attr("href");
    window.open(href);
    return false;
}

এই পদ্ধতির সুবিধাটি হ'ল আপনি যখনই প্রতিটি বারে বাঁধাইয়ের চিন্তা না করেই নতুন লিঙ্কগুলিতে (যেমন এজেএক্সের মাধ্যমে) লোড করতে পারেন।

Answer 14

 <hr>
            <h3 class="form-signin-heading"><i class="icon-edit"></i> Register</h3>
            <button data-placement="top" id="signin_student" onclick="window.location='signup_student.php'" id="btn_student" name="login" class="btn btn-info" type="submit">Student</button>
            <div class="pull-right">
                <button data-placement="top" id="signin_teacher" onclick="window.location='guru/signup_teacher.php'" name="login" class="btn btn-info" type="submit">Teacher</button>
            </div>
        </div>
            <script type="text/javascript">
                $(document).ready(function(){
                $('#signin_student').tooltip('show'); $('#signin_student').tooltip('hide');
                });
            </script>   
            <script type="text/javascript">
                $(document).ready(function(){
                $('#signin_teacher').tooltip('show'); $('#signin_teacher').tooltip('hide');
                });
            </script>   

Answer 15

আমি অভিজ্ঞতা পেয়েছি যে জাভাস্ক্রিপ্ট: hrefs কাজ করবে না যখন পৃষ্ঠাটি আউটলুকের ওয়েবপৃষ্ঠা বৈশিষ্ট্যে এম্বেড করা হয়েছিল যেখানে কোনও মেইল ​​ফোল্ডার পরিবর্তে একটি url দেখানো হবে