2

addEventListener を使用して即時関数を呼び出すと、2 回呼び出されて問題が発生します。バブリングからキャプチャーに変更しようとしましたが、機能しませんでした。ここに私のコードがあります

説明: クリックした場所にテキスト ボックスを追加しようとしています。

var mod = (function(){

    var sEventType = 'click',
        labelObj = document.getElementsByTagName('label');

            return {

                    createTextBox : function(targetId,inputVal){

                        alert('hi');
                        var elemInput = document.createElement('input');
                    },

                    addEvents : function(){

                        for (var i = 0; i < labelObj.length; i++) {
                            if (window.addEventListener) //Firefox, Chrome, Safari, IE 10
                            labelObj[i].addEventListener(sEventType,function(){ mod.createTextBox(this,this.innerHTML);}, false);
                            else if (window.attachEvent) //IE < 9
                            labelObj[i].attachEvent(sEventType, function(){ mod.createTextBox(this,this.innerHTML);});
                        }
                    }
          }
  }());

  //Intialise Event
  mod.addEvents();

ポップアップ内でcreateTextBox、alertを2回呼び出しているaddEventListenerを確認してください。

ここにHTML部分があります

<body>

<div id='tableMain'>

  <div id='exlTopHd'>
    <div id='loginData'>
      <div id='yourName'><label id='mNam'>type your name here</label></div>
      <div id='yourEmail'><label>your email address</label></div>
    </div>
    <div id='exlCtr'>
        <div id='exlTitle'><label>add title<lable></div>
        <div id='addRow'>+row</div>
        <div id='addColomn'>+colomn</div>
        <div id='saveExl'>saving...</div>
    </div>  
  </div>

  <div id='exlTb'></div>

</div>

4

1 に答える 1

2

おそらく、次のように を入れ子にしましinputたlabel:

<label>Check 1: <input type="checkbox" /></label>

ネストされた要素を使用している場合、 をクリックすると、もlabelクリックされます。inputこれを回避するには、次のfor属性を使用できます。

<label for="check1">Check 1: </label><input id="check1" type="checkbox" />

jsFiddle でのライブ デモ。

編集

私が回答を書いたのと同時に、あなたが質問を編集したようです。とにかく、inputs が動的に追加されたとしても、上に書かれていることは有効です。この fiddleを確認してください。それが必要な場合はお知らせください。スニペットは をinput動的に作成し、 の後に挿入しますlabel。

変更されたコード スニペットは次のとおりです。

var mod = (function () {
    var sEventType = 'click',
        labelObj = document.getElementsByTagName('label');
    return {
        createTextBox: function (e) {
            var target = e.target || e.srcElement,
                parent = target.parentElement,
                elemInput = document.createElement('input');
                inpId = parent.id + 'Inp';
            elemInput.value = target.innerHTML;
            elemInput.id = inpId;
            target.setAttribute('for', inpId);
            parent.insertBefore(elemInput, target.nextSibling);
        },
        addEvents: function () {
            for (var i = 0; i < labelObj.length; i++) {
                if (window.addEventListener) //Firefox, Chrome, Safari, IE 10
                labelObj[i].addEventListener(sEventType, function (e) {
                    mod.createTextBox(e);
                }, false);
                else if (window.attachEvent) //IE < 9
                labelObj[i].attachEvent('on' + sEventType, function (e) {
                    mod.createTextBox(e);
                });
            }
        }
    }
}());
于 2013-08-29T05:48:54.170 に答える