ฉันจะปิดใช้งาน HREF ได้อย่างไรหากดำเนินการ onclick

ฉันมีจุดยึดพร้อมทั้ง HREFและONCLICKแอตทริบิวต์ที่ตั้งไว้ หากการคลิกและจาวาสคริปต์ที่เปิดใช้งานฉันต้องการให้เพียงดำเนินการและไม่สนใจONCLICK HREFในทำนองเดียวกันถ้า Javascript ถูกปิดใช้งานหรือไม่สนับสนุนผมอยากให้มันเป็นไปตามHREFURL ONCLICKและไม่สนใจ ด้านล่างนี้เป็นตัวอย่างของสิ่งที่ฉันกำลังทำซึ่งจะเรียกใช้ JS และไปตามลิงค์พร้อมกัน (โดยปกติ JS จะถูกเรียกใช้งานจากนั้นหน้าจะเปลี่ยนไป):

<A HREF="http://example.com/no-js-login" ONCLICK="yes_js_login()">Log in</A>

วิธีที่ดีที่สุดในการทำเช่นนี้คืออะไร?

ฉันหวังว่าจะได้คำตอบ Javascript แต่ฉันจะยอมรับวิธีการใดก็ได้ตราบเท่าที่มันใช้งานได้โดยเฉพาะอย่างยิ่งหากสามารถทำได้ด้วย PHP ฉันได้อ่าน " ลิงก์ href ดำเนินการและเปลี่ยนเส้นทางหน้าก่อนที่ฟังก์ชัน javascript onclick จะสามารถดำเนินการให้เสร็จสิ้น " แล้ว แต่จะมีเพียงความล่าช้าHREFแต่ไม่ได้ปิดใช้งานอย่างสมบูรณ์ ฉันยังมองหาสิ่งที่ง่ายกว่านี้

คุณสามารถใช้โซลูชันแรกที่ไม่ได้แก้ไขหากคุณใส่ผลตอบแทนเป็นอันดับแรกในonclickแอตทริบิวต์:

<a href="https://example.com/no-js-login" onclick="return yes_js_login();">Log in</a>

yes_js_login = function() {
     // Your code here
     return false;
}

ตัวอย่าง: https://jsfiddle.net/FXkgV/289/

    yes_js_login = function() {
         // Your code here
         return false;
    }

หากคุณส่งคืนเท็จควรป้องกันการกระทำเริ่มต้น (ไปที่ href)

แก้ไข:ขออภัยที่ดูเหมือนจะไม่ได้ผลคุณสามารถดำเนินการต่อไปนี้แทน:

<a href="http://example.com/no-js-login" onclick="yes_js_login(); return false;">Link</a>

เพียงปิดการทำงานของเบราว์เซอร์เริ่มต้นโดยใช้preventDefaultและส่งผ่านeventภายใน HTML ของคุณ

<a href=/foo onclick= yes_js_login(event)>Lorem ipsum</a>

yes_js_login = function(e) {
  e.preventDefault();
}

<a href="http://www.google.com" class="ignore-click">Test</a>

ด้วย jQuery:

<script>
    $(".ignore-click").click(function(){
        return false;
    })
</script>

ด้วย JavaScript

<script>
        for (var i = 0; i < document.getElementsByClassName("ignore-click").length; i++) {
            document.getElementsByClassName("ignore-click")[i].addEventListener('click', function (event) {
                event.preventDefault();
                return false;
            });
        }
</script>

คุณกำหนดชั้นเรียน.ignore-clickให้กับองค์ประกอบต่างๆที่คุณต้องการและการคลิกองค์ประกอบเหล่านั้นจะถูกละเว้น

คุณสามารถใช้รหัสง่ายๆนี้:

<a href="" onclick="return false;">add new action</a><br>

จะง่ายกว่าถ้าคุณส่งพารามิเตอร์เหตุการณ์เช่นนี้:

<a href="#" onclick="yes_js_login(event);">link</a>

function yes_js_login(e) {
    e.stopImmediatePropagation();
}

สิ่งนี้อาจช่วยได้ ไม่จำเป็นต้องใช้ JQuery

<a href="../some-relative-link/file" 
onclick="this.href = 'https://docs.google.com/viewer?url='+this.href; this.onclick = '';" 
target="_blank">

รหัสนี้ทำสิ่งต่อไปนี้: ส่งลิงก์สัมพัทธ์ไปยังGoogle Docs Viewer

1. รับเวอร์ชันลิงก์เต็มของจุดยึดโดย this.href
2. เปิดลิงค์หน้าต่างใหม่

ดังนั้นในกรณีของคุณสิ่งนี้อาจใช้ได้:

<a href="../some-relative-link/file" 
onclick="this.href = 'javascript:'+console.log('something has stopped the link'); " 
target="_blank">

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

ตัวอย่าง:

<a onclick="http://blahblah" href="http://blahblah" target="_blank">A regular link</a>
<a onclick="javascript:myFunc($(this));return false" href="javascript:myFunc($(this));"  target="_blank">javascript with self reference</a>

แอตทริบิวต์ href และ onClick มีค่าเหมือนกันยกเว้น I ต่อท้าย "return false" บน onClick เมื่อเป็นการเรียกใช้จาวาสคริปต์ การมี "return false" ในฟังก์ชันที่เรียกว่าไม่ทำงาน

สิ่งนี้ใช้ได้ผลสำหรับฉัน:

<a href="" onclick="return false;">Action</a>

ในกรณีของฉันฉันมีเงื่อนไขเมื่อผู้ใช้คลิกองค์ประกอบ "a" เงื่อนไขคือ:

หากส่วนอื่นมีมากกว่าสิบรายการผู้ใช้ไม่ควรเปลี่ยนเส้นทางไปยังหน้าอื่น

หากส่วนอื่นมีน้อยกว่าสิบรายการผู้ใช้ควรถูกเปลี่ยนเส้นทางไปยังหน้าอื่น

การทำงานขององค์ประกอบ "a" ขึ้นอยู่กับองค์ประกอบอื่น ๆ รหัสภายในเหตุการณ์การคลิกมีดังต่อไปนี้:

var elementsOtherSection = document.querySelectorAll("#vehicle-item").length;
if (elementsOtherSection> 10){
     return true;
}else{
     event.preventDefault();
     return false;
}