JS - preventDefault在锚标记点击时停止刷新

时间:2018-06-08 03:02:09

标签: javascript jquery html javascript-events mouseevent

我有下面的代码行,它只是在父页面上放置一个链接:

<a href="javascript:void(0)" id="createNewsLink" class="short" onclick="javascript:func1(); func2(param1,param2,param3);return false;"><caps:msg textId="createNews"/></a>

上述链接2函数的Onclick被调用:

func1的():

var timestamp;

function func1() {
    timestamp = +new Date();
    return false;
}

FUNC2():

function  func2(param1,param2,param3,param4){ 
    var win;
    var location = window.location.href; // location A
    var encodeStringVar = encodeString(param3);
    win = window.open(param1+'/struts1.action?param2='+param2+'&param3='+ escape(encodeStringVar) +'#'+param4,target='t1','toolbar=no,scrollbars=yes,menubar=no,location=no,width=990,height=630, top=100, left=100');
    window.location.href = location; // location A
    return win;
}

点击父页面上的链接,通过调用struts动作打开一个弹出窗口,它运行正常。唯一的问题是当单击父页面上的链接时,它会刷新父页面。我不希望它刷新,我尝试在链接和return false函数中添加javascript void(),我还尝试在此链接上为click事件添加事件监听器,如下所示:

$(document).ready(function() {
    $("#createNewsLink").click(function(event) {
        //return false;
        event.preventDefault();
    })
})
  

及以下:

$(document).ready(function() {
    document.getElementById("createNewsLink").addEventListener("click", function(event) {
        event.preventDefault();
    });
})

但这些都没有成功,有人可以指出我的代码中的错误吗?

1 个答案:

答案 0 :(得分:0)

你能考虑尝试:

(function(){
  var linkElement = document.querySelector('#createNewsLink');
  linkElement.addEventListener('click',function(e) {

    var param1 = e.target.getAttribute('attr-param1');
    var param2 = e.target.getAttribute('attr-param2');
    console.log(param1,param2);
    // Do what ever you want here.
    e.preventDefault();
  });
})();
<a href="http://google.com" id="createNewsLink" class="short" attr-param1="foo" attr-param2="bar">Click me</a>

这里我避免了来自html的任何事件绑定,并将所有traitment / binding集中在一个地方。然后我指出一种方法来找回你的特征的强制性准备。