Question

我的ui元素（icon）有问题，是draggable（）函数的持有者。该图标应仅在点击一次后附加。我的代码的问题是，当我点击图标时，它再次运行代码并附加下一个图标。

在这种情况下如何避免事件传播。这里有更好的方法来使用one（）函数。我的代码：

HTML结构：

<div class="editor">
  <h1>Title</h2>
  <p>paragraph</p>
  <img src="">
</div>

<div class="editor">
  <h1>Title</h2>
  <p>paragraph</p>
  <img src="">
</div>


<div class="editor">
  <h1>Title</h2>
  <p>paragraph</p>
  <img src="">
</div>

JS：

$(document).on('click', '.editor *', function(event) {      
        $(this).resizable();
        $(this).draggable({ handle: ".editor-move" }); 
        $(this).one($(this).append("<i class='icon-move editor-move'></i>")); 
        return false;
   });

Answer 1

首先，您需要确保事件的当前目标不是icon-move元素，如果是，则退出。

if ($(event.target).hasClass("icon-move"))
    return false;

其次，检查后续点击是否已添加图标，以避免为同一元素添加多个图标。

if($(".icon-move",this).length==0)
    $(this).append("<i class='icon-move editor-move'></i>");

JSFiddle

Answer 2

$(document).on('click', '.editor *', function(event) {
        event.stopPropagation();      
        $(this).resizable();
        $(this).draggable({ handle: ".editor-move" }); 
        $(this).one($(this).append("<i class='icon-move editor-move'></i>")); 
        return false;
   });

Answer 3

尝试

$(document).one('click', '.editor *', function(event) {      
    $(this).resizable();
    $(this).draggable({ handle: ".editor-move" }); 
    $(this).append("<i class='icon-move editor-move'></i>"); 
    return false;
});

仅添加一次UI元素并避免事件传播

3 个答案: