将我的 jQuery 单击事件与现有对象的 onclick 属性混合

Question

我正在使用 jQuery，但处理由 JSF 页面生成的标记。许多元素都具有 JSF 代码提供的 onclick 属性（这不是我的领域）。

示例：

<div onclick="[jsf js to submit form and go to next page]">submit</div>

我正在尝试使用 jQuery 添加一些客户端验证。我需要类似这样的伪代码：

$('div').click(function(e){
  if(myValidation==true){
     // do nothing and let the JS in the onlick attribute do its thing
  } else {
     $error.show();
     // somehow stop the onclick attribute JS from firing
  }

})

是否有处理此问题的最佳实践？

我的一个想法是，在页面加载时，获取 onclick 属性的值，从对象中删除 onclick 属性，然后......好吧，这就是我迷失的地方。我可以将 JS 作为文本缓存在 data- 属性中，但我不确定稍后如何将其关闭。

Answer 1

如果需要，只需使用 eval 在 jQuery 单击事件中运行 onclick 属性代码即可。您需要删除 onclick 属性

<div onclick="alert('hi');">submit</div>

-

$(document).ready(function() {
    var divClick = $('#theDiv').attr('onclick');
    $('#theDiv').removeAttr('onclick');
});

$('#theDiv').bind('click', function(e) {
    if (myValidation == true) {
        // do nothing and let the JS in the onclick attribute do its thing
        eval(divClick);
    } else {
        $error.show();
        // somehow stop the onclick attribute JS from firing
        e.preventDefault();
    }
});

Answer 2

返回 false 或使用：

e.stopPropagation()

或

e.preventDefault()

根据您的需要。

Answer 3

编辑

您可以保存原始事件：

var originalEvent = $('div').attr("onclick");
$('div').attr("onclick", false);

$('div').click(function(e) {
        if (false) {
            // do nothing and let the JS in the onlick attribute do its thing

            eval(originalEvent);
        }
        else {
            alert("error");
            // somehow stop the onclick attribute JS from firing
        }

    });

看看这个http://jsfiddle.net/j4jsU /

将 if(false) 更改为 if(true) 以查看表单有效时会发生什么。

Answer 4

我喜欢 e.stopProgation() 和 e.preventDefault()，但如果您不喜欢该策略，您也可以手动删除 onclick() 属性并手动调用它在成功验证后使用的函数。

不同的笔画..

Answer 5

为什么你不能做这样的事情：

div=document.getElementById('test');
oldClick=div.onclick;
bol=false;
div.onclick=function(){
    if(bol){
        oldClick();
    }
    else {
       alert('YOU SHALL NOT RUN INLINE JAVASCRIPT'); 
   }
}