亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全,請及時綁定郵箱和手機立即綁定
已解決430363個問題,去搜搜看,總會有你想問的

label標簽綁定jQuery的click事件,但click事件會觸發兩次

label標簽綁定jQuery的click事件,但click事件會觸發兩次

達令說 2018-10-19 18:14:57
以下是我的代碼,想實現點擊單選項,獲取得分的需求,但是點擊單選項的文字,得分會被計算兩次,請問我的代碼出現了什么問題?謝謝<!DOCTYPE html><html><head>    <meta charset="UTF-8">    <title></title></head><body>  <label class="man"><input type="radio" name="sex" id="man">man</label>  <label class="woman"><input type="radio" name="sex" id="woman">woman</label>  <script src="JS/jquery-3.1.1.min.js"></script>  <script>    $(document).ready(function(){      var score = 0;      $(".man").click(function(){        score = score + 1;        console.log(score);        // score = 0;      });      $(".woman").click(function(){        score = score + 2;        console.log(score);        // score = 0;      });    })  </script></body></html>
查看完整描述

1 回答

?
米琪卡哇伊

TA貢獻1998條經驗 獲得超6個贊

我認為原因出在事件捕獲
先說解決方案:在你的代碼里,為click綁定的函數添加return false:

<!DOCTYPE html>

<html>

<head>

    <meta charset="UTF-8">

    <title></title>

</head>

<body>

  <label class="man"><input type="radio" name="sex" id="man">man</label>

  <label class="woman"><input type="radio" name="sex" id="woman">woman</label>

  <script src="JS/jquery-3.1.1.min.js"></script>

  <script>

    $(document).ready(function(){

      var score = 0;

      $("#man").click(function(){

        score = score + 1;

        console.log(score);

        // score = 0;

        /*修改部分開始*/

        return false;

        /*修改部分結束*/

      });


      $("#woman").click(function(){

        score = score + 2;

        console.log(score);

        // score = 0;

        /*修改部分開始*/

        return false;

         /*修改部分結束*/

      });

    })

  </script>

</body>

</html>

現在我們來驗證一下猜測:假設是事件捕獲,那么只需要在觸發的時候彈出觸發事件的對象即可。所以我們修改一下click綁定的函數:

$("#man").click(function(event){

    score = score + 1;

    console.log(score);

    // score = 0;

    /*修改部分開始*/

       console.log(event.target)

    /*修改部分結束*/

  });

看下結果:

//控制臺打印的結果

1

<label class="man">…</label>

2

<input type="radio" name="sex" id="man">


查看完整回答
反對 回復 2018-11-28
  • 1 回答
  • 0 關注
  • 1045 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯系客服咨詢優惠詳情

幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

公眾號

掃描二維碼
關注慕課網微信公眾號