แท็ก HTML <a> ต้องการเพิ่มทั้ง href และ onclick working

ฉันต้องการถามเกี่ยวกับแท็ก HTML

<a href="www.mysite.com" onClick="javascript.function();">Item</a>

วิธีการนี้ทำให้แท็กทำงานกับhrefและonClick ? (ชอบใช้ onClick ก่อนแล้วจึง href)

คุณมีสิ่งที่คุณต้องการแล้วโดยมีการเปลี่ยนแปลงไวยากรณ์เล็กน้อย:

<a href="www.mysite.com" onclick="return theFunction();">Item</a>

<script type="text/javascript">
    function theFunction () {
        // return true or false, depending on whether you want to allow the `href` property to follow through or not
    }
</script>

พฤติกรรมเริ่มต้นของ<a>แท็กonclickและhrefคุณสมบัติคือการดำเนินการonclickจากนั้นทำตามhrefตราบใดที่onclickไม่ส่งคืนfalseยกเลิกเหตุการณ์ (หรือเหตุการณ์ไม่ได้รับการป้องกัน)

ใช้jQuery คุณต้องจับภาพclickเหตุการณ์จากนั้นไปที่เว็บไซต์

$("#myHref").on('click', function() {
  alert("inside onclick");
  window.location = "http://www.google.com";
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a href="#" id="myHref">Click me</a>

เพื่อให้บรรลุการใช้ html ต่อไปนี้:

<a href="www.mysite.com" onclick="make(event)">Item</a>

<script>
    function make(e) {
        // ...  your function code
        // e.preventDefault();   // use this to NOT go to href site
    }
</script>

นี่เป็นตัวอย่างการทำงาน

ไม่จำเป็นต้องใช้ jQuery

บางคนบอกใช้onclickเป็นการฝึกที่ไม่ดี ...

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

<a id="myButton" href="http://google.com">Click me!</a>
<script>
    window.addEventListener("load", () => {
        document.querySelector("#myButton").addEventListener("click", e => {
            alert("Clicked!");
            // Can also cancel the event and manually navigate
            // e.preventDefault();
            // window.location = e.target.href;
        });
    });
</script>

ใช้ng-clickแทนonclick. และมันง่ายอย่างที่:

<a href="www.mysite.com" ng-click="return theFunction();">Item</a>

<script type="text/javascript">
function theFunction () {
    // return true or false, depending on whether you want to allow 
    // the`href` property to follow through or not
 }
</script>