在"a"标签中添加点击事件

客官°小女子只卖身不卖艺 2021-09-28 20:36 451阅读 0赞

注：[https://www.cnblogs.com/sushu-yaya/p/6811426.html][https_www.cnblogs.com_sushu-yaya_p_6811426.html]

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
    <body>
    
    <h1>方式1: href="javascript:void(0)"</h1>
    <a href="javascript:void(0)" onclick="alert('方式1, 执行一段代码.')">情形1: 执行一段代码.</a> <br/>
    <a href="javascript:void(0)" onclick="popup()">情形2: 调用一个已声明的js函数.</a> <br/>
    <a href="javascript:void(0)" id="manual_bind_click_way1">情形3: 手动绑定click事件</a> <br/>
    
    <h1>方式2: onclick="return false;"</h1>
    <a href="http://www.google.com" onclick="alert('方式2, 执行一段代码.'); return false;">情形1: 执行一段代码.</a> <br/>
    <a href="http://www.google.com" onclick="popup(); return false;">情形2: 调用一个已声明的js函数.</a> <br/>
    <a href="http://www.google.com" id="manual_bind_click_way2">情形3: 手动绑定click事件</a>
    <script>
    
        // 已声明函数popup
        function popup() {
            alert("弹窗测试.");
        }
        
        // 手动绑定click
        window.onload = function () {
            var aEle_way1 = document.getElementById("manual_bind_click_way1"); // 方式1 a标签.
            aEle_way1.onclick = function () {
                alert("手动绑定click事件.");
            }
    
            var aEle_way2 = document.getElementById("manual_bind_click_way2"); // 方式2 a标签.
            aEle_way2.onclick = function () {
                alert("手动绑定click事件.");
                return false;
            }
        }
    </script>
    </body>
    </html>

注：[https://bennie.im/2017/11/24/onclick-event-on-an-a-element/][https_bennie.im_2017_11_24_onclick-event-on-an-a-element]

[https_www.cnblogs.com_sushu-yaya_p_6811426.html]: https://www.cnblogs.com/sushu-yaya/p/6811426.html
[https_bennie.im_2017_11_24_onclick-event-on-an-a-element]: https://bennie.im/2017/11/24/onclick-event-on-an-a-element/