在线观看不卡亚洲电影_亚洲妓女99综合网_91青青青亚洲娱乐在线观看_日韩无码高清综合久久

鍍金池/ 問答/HTML5  HTML/ [js閉包] [js構(gòu)造函數(shù)] js高手點(diǎn)進(jìn)來...

[js閉包] [js構(gòu)造函數(shù)] js高手點(diǎn)進(jìn)來...

有這樣一個需求：沒有代碼不太好描述啊，js閉包內(nèi)的構(gòu)造函數(shù)因?yàn)闃I(yè)務(wù)需要new兩次，而構(gòu)造函數(shù)內(nèi)有綁定事件，導(dǎo)致事件觸發(fā)兩次的情況。不明白？先看下代碼吧...最下邊有測試地址哦

前端技術(shù)：Semantic UI/jQuery

HTML:

<!DOCTYPE html>
<html>
<head>
<meta name="description" content="測試閉包">
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
  <link rel="stylesheet" >
</head>
<body>
  <div class="ui top attached tabular menu">
    <a class="active item" data-tab="first">First</a>
    <a class="item" data-tab="second">Second</a>
  </div>
  <div class="ui bottom attached active tab segment" data-tab="first">
    <button class="ui positive basic button">click it</button>
  </div>
  <div class="ui bottom attached tab segment" data-tab="second">
    <button class="ui positive basic button">click it</button>
  </div>
  
  <script src="https://code.jquery.com/jquery-3.0.0.js"></script>
  <script src="https://cdn.bootcss.com/semantic-ui/2.2.13/semantic.min.js"></script>
</body>
</html>

JS:

// Semantic UI 初始化
$('.menu .item').tab();

document.onload = (function() {
  "use strict";
  var GraphCreator = function(clickable) {
    var thisGraph = this;
    thisGraph.state = {
      clickable: clickable,
      clicked: false,
    }
    $('button').on('click', function() {
      alert('觸發(fā)click！');
      var state = thisGraph.state;
      if (state.clickable && !state.clicked) {
        state.clicked = true;
        alert('點(diǎn)擊以后clicked屬性修改！');
      }
    })
  }
  
  /**** MAIN ****/
  var graph = new GraphCreator(true);
  var graph_active;
  $('.menu>[data-tab=second]').on('click', function() {
    if (!graph_active) {
      graph_active = new GraphCreator(true);
    }
  })
  
})()

看一下JS代碼，GraphCreator構(gòu)造函數(shù)內(nèi)部，button事件因?yàn)橛玫搅藰?gòu)造函數(shù)內(nèi)部的很多數(shù)據(jù)，無法放在構(gòu)造函數(shù)之外。 /**** MAIN ****/ 下第一次加載時創(chuàng)建對象graph，當(dāng)點(diǎn)擊second標(biāo)簽頁時,此標(biāo)簽下的元素需要有相同的功能，創(chuàng)建第二個對象graph_active，從而導(dǎo)致點(diǎn)擊button時會觸發(fā)兩次事件。有沒有辦法，防止觸發(fā)兩次事件。
操作如下：
圖片描述
測試地址：Demo Online
真正項(xiàng)目里邊數(shù)據(jù)結(jié)構(gòu)要遠(yuǎn)遠(yuǎn)比此Demo要復(fù)雜。求幫助啊...
我感覺單單憑一個小Demo不能說明我的問題，看一下我的項(xiàng)目演示吧，debug的地方就相當(dāng)于此Demo中的button事件，點(diǎn)編輯的時候會產(chǎn)生一個新標(biāo)簽頁同時new一個graph實(shí)例，所以每次都會觸發(fā)兩次...產(chǎn)生的‘塊活動’和‘過程’兩個標(biāo)簽下要有相同的功能（包括拖拽、右擊菜單等）才選擇再實(shí)例化一次
圖片描述

回答
編輯回答
遺莣

你這個就是點(diǎn)擊事件里面有點(diǎn)擊事件，

$('button').off().on('click', function() {
     
  })
2017年5月31日 12:17
編輯回答
蟲児飛

你選擇器寫的有問題吧。$('[data-tab].active button').on('click', () => {}) 這樣不就不會了？

2018年6月29日 16:30
編輯回答
青檸

就是因?yàn)槊看蝞ew的時候都會再給button綁定一次事件

    $('button').off('click').on('click', function() {

    })
2018年2月5日 12:26