首页 > jQuery click中的return与html onclick的return是否会冲突的问题。

jQuery click中的return与html onclick的return是否会冲突的问题。

测试代码如下:
html:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <script class="jquery library" src="/js/sandbox/jquery/jquery-1.8.2.min.js" type="text/javascript"></script>
    <title>RunJS 演示代码</title>
  </head>
<body>
    <input type="submit" name="regPsSubmit" value="submit" onclick="return false;" id="regPsSubmit" class="regBtn">
  </body>
</html>

js:

$(document).ready(function(){
var $reg_submit = $('#regPsSubmit');
        $reg_submit.click(function(eve){
            var e = eve || window.event;
                var jdg = true;
            if ( jdg ) {
                alert();
                return true; 
            } else {
                e.preventDefault();
            }
        });
})

问题:

jQuery中的的click时间触发的return true是否会覆盖掉(或着会冲突)html中onclick的return false?

备注:

实际项目中的input是由asp.net webform生成的服务器控件。发现jQuery 中的return true没有触发click。所以产生此疑问。

不会~

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <script class="jquery library" src="/js/sandbox/jquery/jquery-1.8.2.min.js" type="text/javascript"></script>
    <title>RunJS 演示代码</title>
  </head>
<body>
    <input type="submit" name="regPsSubmit" value="submit" onclick="alert('inline'); return false;" id="regPsSubmit" class="regBtn">
  </body>
</html>


$(document).ready(function() {
    var $reg_submit = $('#regPsSubmit');
    $reg_submit.click(function(eve) {
        var e = eve || window.event;
        var jdg = true;
        if (jdg) {
            alert('jq outline');
            return true;
        } else {
            e.preventDefault();
        }
    });
})

楼主在仔细点就可以发现了。其实在你的例子中。先执行的是行内事件,在执行的是jquery的事件。复制到runjs 直接可测


1)onclick 比 jQuery的注册事件处理函数优先处理
2)return false;只是取消了浏览器的的默认行为,但是不影响事件的冒泡传播行为
3)onclick="event.stopImmediatePropagation();return false;" jquery click事件就不会被调用到

2个方法
1.直接修改onclick函数
2.jqueryclick事件处理函数中手工调用form的submit方法(如果没有可以考虑加个隐藏的)

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
      <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <script class="jquery library" src="/js/sandbox/jquery/jquery-1.8.2.min.js" type="text/javascript"></script>
        <title>RunJS 演示代码</title>
        <script>
            $(function(){
                //1) onclick="return false";
                $("#test").click(function(eve){
                        //return true;
                        var e = eve || window.event;
                       var jdg = true;
                       if (jdg) {
                           alert('jq outline');
                           $('form').submit();
                           //return true;
                       } else {
                           e.preventDefault();
                       }
                    });
                });
                //2) onclick="judgeFun(event);"
                function judgeFun(event){
                    var jdg = true;
                    if(!jdg){
                        return false;
                    }
                    //执行正常逻辑
                }
        </script>
    </head>
    <body>
        <form id="form" action="http://www.sina.com.cn">
      <input type="button" name="test" value="123" id="test" onclick="judgeFun(event);"/>
          <form>
    </body>
    </html>
【热门文章】
【热门文章】