javascript - 仅附加一次 UI 元素并避免事件传播

Question

我的 ui 元素（图标）有问题，它是 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;
});