イベントハンドラの戻り値をオーバーライドしますか？

Question

これは以前に尋ねられたと確信していますが、私は答えを見つける運がなかった。おそらく私にはわからない言葉があります。

jQueryイベントハンドラは、トリガされた要素以外の要素を返すことはできますか？

通常、要素のjQueryイベントをトリガすると、その要素はイベントハンドラによって返されます。代わりに別の要素を返す方法はありますか？ここで

（event.target、event.currentTargetなど以外は）私のHTMLです：私は#wrapperのカスタムjQueryのイベントを行った場合

<div id="content"> 
    <div id="wrapper"> 
     <div class="instance"> 
     </div> 
    </div> 
</div> 

、私はそのイベントハンドラが.instanceを返すことができますか？ここで

は私のJavaScriptのだ：

$('#content').on('new.instance', '#wrapper', function(event) { 
    var wrapper = $(event.currentTarget); 
    var instance = wrapper.find('div.instance').first(); 

    var newInstance = instance.clone(true, true); 
    newInstance.appendTo(wrapper); 

    return newInstance; 
}); 

var returnValue = $('#wrapper').trigger('new.instance'); 
console.log('returnValue.html():', returnValue.html()); // #wrapper, not .instance 

私はnew.instanceイベントハンドラが.instance要素を返すことはできますか？もしそうなら、コードには何が欠けていますか？

Answer 1

.trigger()

... 我々は.on（）メソッドを使用して、カスタムイベントタイプを定義、第二引数.trigger（）を使用すると便利になることがあります。

あなたは、単に2番目のパラメータとして.triggerメソッドにオブジェクトを追加し、そこにあなたのインスタンスを収集することができます。

var instances = {data:[]}; 
 

 
$('#content').on('new.instance', '#wrapper', function(event, instances) { 
 
    var wrapper = $(event.currentTarget); 
 
    var instance = wrapper.find('div.instance').first(); 
 
    var newInstance = instance.clone(true, true); 
 
    instances.data.push(newInstance); 
 
    newInstance.appendTo(wrapper); 
 
}); 
 

 
$('#wrapper').trigger('new.instance', instances); 
 

 
console.log(instances.data[0].get(0)); 
 

 
// somewhere else at a latter time trigger new.instance again 
 
setTimeout(function() { 
 
    $('#wrapper').trigger('new.instance', instances); 
 
    $.each(instances.data, function(index, item) { 
 
    var counter = index + 1 
 
    item.text('cloned instance ' + counter); 
 
    console.log(item.get(0)) 
 
    }) 
 
}, 2000)

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="content"> 
 
    <div id="wrapper"> 
 
    <div class="instance"></div> 
 
    </div> 
 
</div>

Answer 2

.instanceはevent.chainにありますので、bubbling phaseの間にコールバックでアクセスできます。各要素をクリックしてスニペットを確認します。

スニペット

var wrp = document.getElementById('wrapper'); 
 

 
wrp.addEventListener('click', function(e) { 
 
    if (e.target != e.currentTarget) { 
 
    var trueTarget = e.target.className; 
 
    alert(trueTarget + ' has been clicked!'); 
 
    } 
 
    e.stopPropagation(); 
 
}, false);

#content { 
 
    border: 2px dashed grey; 
 
    width: 50vw; 
 
    height: 50vh; 
 
    background: rgba(0, 0, 0, .3); 
 
    text-align: right; 
 
    color: white; 
 
} 
 
#wrapper { 
 
    border: 3px dotted orange; 
 
    background: rgba(0, 0, 0, .5); 
 
    width: 50%; 
 
    height: 50%; 
 
    text-align: right; 
 
    font-size: small; 
 
    color: orange; 
 
} 
 
.instance { 
 
    border: 1px solid yellow; 
 
    width: 50%; 
 
    height: 50%; 
 
    background: rgba(0, 0, 0, .7); 
 
    text-align: center; 
 
    font-size: smaller; 
 
    color: yellow; 
 
    
 
}

<div id="content"> 
 
    CONTENT 
 
    <div id="wrapper"> 
 
    WRAPPER 
 
    <div class="instance"> 
 
     INSTANCE 
 
    </div> 
 
    </div> 
 
</div>