Question

我已经：

backdrop = document.getElementById('backdrop');
dialog = document.getElementById('dialog');
dialog_body = document.querySelector('#dialog .body');
document.addEventListener('click', function(e) {
if ( matches.call(e.target, '[data-show=dialog]')) {
    buoy.addClass(backdrop, 'fadeIn');
    buoy.addClass(dialog, 'fadeIn');
    var href = e.target.parentNode.getAttribute('action');
    dialog_body.innerHTML = '<div>FOOOOO</div>';
    [].forEach.call(document.querySelectorAll('[data-hide=dialog]'), function(el) {
      el.addEventListener('click', function() {
        buoy.removeClass(backdrop, 'fadeIn');
        buoy.removeClass(dialog, 'fadeIn');
      })
    })
}

}，false）;

和[data-show =对话框]是：

<button type="sumit" class="btn xs default" data-show="dialog">
    <i class="ellipsis-v"></i>
</button>

如果我点击

<i class="ellipsis-v"></i>

代码不起作用..

如果我点击

<i class="ellipsis-v"></i>

代码完美无缺..

如果我有：

<button type="sumit" class="btn xs default" data-show="dialog">
    <i class="ellipsis-v"></i>
    <span>fooo</span>
</button>

如果我点击

<i class="ellipsis-v"></i>

或

<span>fooo</span>

代码不起作用..

如果我点击

<i class="ellipsis-v"></i>

或

span>fooo</span>

代码完美无缺..

有什么问题？

Answer 1

为什么不：

function handler(e){
 var t=e.target;
 if(t.dataset['show']=='dialog'||t.parentNode.dataset['show']=='dialog'){
  /* code ...... */ 
 }
}
document.addEventListener('click',handler,false);

在这种情况下，你有一个eventHandler。（没有循环）。

为简单起见，您可以将该处理程序添加到parentNode。

并且您必须为t.dataset['show']=='dialog'添加更好的检查，因为如果它没有数据集会产生错误。（我写的只是为了给你一个想法）

你搜索data-hide但是你只有data-show

如果您有任何问题，请询问..

如果我误解了你的问题告诉我，我可以重新编写代码。

<强>样本

http://jsfiddle.net/A7xk2/1/

更少的eventHadlers总是更具性能......

同样在这个例子中，我现在只是写作...我需要很多鼠标事件，而且大多数都在文档本身......

http://jsfiddle.net/LxX34/12/

修改

在btn元素上添加点击处理程序

它适用于li和on按钮上的span，如本例所示。

也许你的李有某种preventDefault或者回归false ??

http://jsfiddle.net/A7xk2/2/

如果按钮有子项，请单击“问题”

1 个答案: