อะไรคือความแตกต่างระหว่างวิธีการต่างๆในการใส่โค้ด JavaScript ใน <a>?

Question 1

ฉันได้เห็นวิธีการต่อไปนี้ในการใส่โค้ด JavaScript ใน<a>แท็ก:

function DoSomething() { ... return false; }

<a href="javascript:;" onClick="return DoSomething();">link</a>
<a href="javascript:DoSomething();">link</a>
<a href="javascript:void(0);" onClick="return DoSomething();">link</a>
<a href="#" onClick="return DoSomething();">link</a>

ฉันเข้าใจแนวคิดในการพยายามใส่ URL ที่ถูกต้องแทนที่จะใส่โค้ด JavaScript ในกรณีที่ผู้ใช้ไม่ได้เปิดใช้งาน JavaScript แต่สำหรับจุดประสงค์ของการสนทนานี้ฉันต้องถือว่า JavaScript เปิดใช้งาน (พวกเขาไม่สามารถเข้าสู่ระบบได้หากไม่มี)

โดยส่วนตัวแล้วฉันชอบตัวเลือกที่ 2 เพราะมันช่วยให้คุณเห็นว่าอะไรกำลังจะถูกเรียกใช้ - มีประโยชน์อย่างยิ่งเมื่อทำการดีบักที่มีการส่งผ่านพารามิเตอร์ไปยังฟังก์ชัน ฉันใช้มันมาพอสมควรและไม่พบปัญหาเกี่ยวกับเบราว์เซอร์

ฉันได้อ่านที่มีคนแนะนำ 4 เพราะมันทำให้ผู้ใช้มีลิงค์ที่แท้จริงเพื่อติดตาม แต่จริงๆ # ไม่ใช่ "ของจริง" มันจะไม่ไปไหนอย่างแน่นอน

มีสิ่งที่ไม่รองรับหรือไม่ดีจริงๆเมื่อคุณรู้ว่าผู้ใช้เปิดใช้งาน JavaScript?

คำถามที่เกี่ยวข้อง: Href สำหรับลิงก์ JavaScript:“ #” หรือ“ javascript: void (0)”? .

Question 2

ผมค่อนข้างสนุกกับแมตต์ Kruse บทความ ในนั้นเขาระบุว่าการใช้hrefส่วนเพื่อรันโค้ด JavaScript เป็นความคิดที่ไม่ดี แม้ว่าคุณจะระบุว่าผู้ใช้ของคุณต้องเปิดใช้งาน JavaScript แต่ก็ไม่มีเหตุผลที่คุณจะไม่มีหน้า HTML ธรรมดาที่ลิงก์ JavaScript ทั้งหมดของคุณสามารถชี้ไปที่hrefส่วนของพวกเขาได้ในกรณีที่มีคนปิด JavaScript หลังจากเข้าสู่ระบบ ฉันขอแนะนำอย่างยิ่งให้คุณยังคงอนุญาตให้ใช้กลไกทางเลือกนี้ สิ่งนี้จะเป็นไปตาม "แนวทางปฏิบัติที่ดีที่สุด" และบรรลุเป้าหมายของคุณ:

<a href="javascript_required.html" onclick="doSomething(); return false;">go</a>

Question 3

ทำไมคุณถึงทำเช่นนี้เมื่อคุณสามารถใช้addEventListener/ attachEvent? หากไม่มีhref- เทียบเท่าอย่าใช้ an <a>ใช้ a <button>และจัดรูปแบบตามนั้น

Question 4

คุณลืมวิธีอื่น:

5: <a href="#" id="myLink">Link</a>

ด้วยรหัส JavaScript:

document.getElementById('myLink').onclick = function() {
    // Do stuff.
};

ฉันไม่สามารถแสดงความคิดเห็นได้ว่าตัวเลือกใดที่มีการสนับสนุนที่ดีที่สุดหรือตัวเลือกใดดีที่สุด แต่ฉันจะบอกว่าฉันชอบสไตล์นี้มากเพราะมันแยกเนื้อหาของคุณออกจากโค้ด JavaScript มันเก็บโค้ด JavaScript ทั้งหมดไว้ด้วยกันซึ่งง่ายกว่ามากในการดูแลรักษา (โดยเฉพาะอย่างยิ่งถ้าคุณใช้สิ่งนี้กับลิงก์จำนวนมาก) และคุณยังสามารถใส่ไว้ในไฟล์ภายนอกซึ่งสามารถบรรจุเพื่อลดขนาดไฟล์และแคชโดยเบราว์เซอร์ไคลเอนต์

Question 5

<a href="#" onClick="DoSomething(); return false;">link</a>

ฉันจะทำสิ่งนี้หรือ:

<a href="#" id = "Link">link</a>
(document.getElementById("Link")).onclick = function() {
    DoSomething();
    return false;
};

ขึ้นอยู่กับสถานการณ์ สำหรับแอปขนาดใหญ่แอปที่สองจะดีที่สุดเพราะจะรวมรหัสเหตุการณ์ของคุณ

Question 6

วิธีที่ 2 มีข้อผิดพลาดทางไวยากรณ์ใน FF3 และ IE7 ฉันชอบวิธี # 1 และ # 3 เพราะ # 4 ทำให้ URI สกปรกด้วย '#' แม้ว่าจะทำให้พิมพ์น้อยลง ... เห็นได้ชัดจากคำตอบอื่น ๆ วิธีแก้ปัญหาที่ดีที่สุดคือ html แยกจากการจัดการเหตุการณ์

Question 7

ความแตกต่างอย่างหนึ่งที่ฉันสังเกตเห็นระหว่างสิ่งนี้:

<a class="actor" href="javascript:act1()">Click me</a>

และนี่:

<a class="actor" onclick="act1();">Click me</a>

คือถ้าในทั้งสองกรณีคุณมี:

<script>$('.actor').click(act2);</script>

จากนั้นสำหรับตัวอย่างแรกact2จะทำงานก่อนact1และในตัวอย่างที่สองจะเป็นอีกทางหนึ่ง

Question 8

เบราว์เซอร์สมัยใหม่เท่านั้น

<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
(function(doc){
    var hasClass = function(el,className) {
        return (' ' + el.className + ' ').indexOf(' ' + className + ' ') > -1;
    }
    doc.addEventListener('click', function(e){
      if(hasClass(e.target, 'click-me')){
          e.preventDefault();
          doSomething.call(e.target, e);
      }
    });
})(document);

function doSomething(event){
  console.log(this); // this will be the clicked element
}
</script>
<!--... other head stuff ...-->
</head>
<body>

<!--buttons can be used outside of forms https://stackoverflow.com/a/14461672/175071 -->
<button class="click-me">Button 1</button>
<input class="click-me" type="button" value="Button 2">

</body>
</html>

ข้ามเบราว์เซอร์

<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
(function(doc){
    var cb_addEventListener = function(obj, evt, fnc) {
        // W3C model
        if (obj.addEventListener) {
            obj.addEventListener(evt, fnc, false);
            return true;
        } 
        // Microsoft model
        else if (obj.attachEvent) {
            return obj.attachEvent('on' + evt, fnc);
        }
        // Browser don't support W3C or MSFT model, go on with traditional
        else {
            evt = 'on'+evt;
            if(typeof obj[evt] === 'function'){
                // Object already has a function on traditional
                // Let's wrap it with our own function inside another function
                fnc = (function(f1,f2){
                    return function(){
                        f1.apply(this,arguments);
                        f2.apply(this,arguments);
                    }
                })(obj[evt], fnc);
            }
            obj[evt] = fnc;
            return true;
        }
        return false;
    };
    var hasClass = function(el,className) {
        return (' ' + el.className + ' ').indexOf(' ' + className + ' ') > -1;
    }

    cb_addEventListener(doc, 'click', function(e){
      if(hasClass(e.target, 'click-me')){
          e.preventDefault ? e.preventDefault() : e.returnValue = false;
          doSomething.call(e.target, e);
      }
    });
})(document);

function doSomething(event){
  console.log(this); // this will be the clicked element
}
</script>
<!--... other head stuff ...-->
</head>
<body>

<!--buttons can be used outside of forms https://stackoverflow.com/a/14461672/175071 -->
<button class="click-me">Button 1</button>
<input class="click-me" type="button" value="Button 2">

</body>
</html>

คุณสามารถเรียกใช้สิ่งนี้ก่อนที่เอกสารจะพร้อมคลิกปุ่มต่างๆจะทำงานได้เนื่องจากเราแนบเหตุการณ์ไปกับเอกสาร

แหล่งที่มา: