Создать мертвую зону в пределах области интерактивного JQuery

Question

С jQuery, jQuery-ui и одна из того Ui (я совсем как lightness) включен

(медведь со мной, есть вопрос в нижней части, который вы можете перескочить к тому, если вам нравится, просто хотел показать, как я добрался до места, где я)

(извините, если есть какие-либо ошибки или биты, которые я пропустил в коде, он действительно работает, но сокращал код для удобства чтения)

Я начал со стандартного draggable + Sortable, предоставив jQuery-UI проект:

// HTML 
<div id="leftColumn"> 
<ul id="pageElements"> 
<li class="ui-state-default ui-corner-all" id="html">Html</li> 
<li class="ui-state-default ui-corner-all" id="paragraph">Paragraph</li> 
<li class="ui-state-default ui-corner-all" id="image">Image</li> 
<li class="ui-state-default ui-corner-all" id="faq">FAQ</li> 
</ul> 
</div> 

<div id="rightColumn"> 
    <ul id="pageItems"></ul> 
</div> 

// JavaScript Code 
$("#pageItems").sortable({ 
    revert: true, 
    placeholder: 'ui-state-highlight', 
    tolerance: 'pointer' 
}); 
$("#pageElements li").draggable({ 
    connectToSortable: '#pageItems', 
    helper: 'clone', 
    revert: 'invalid' 
}); 

Тогда я начал хорошо подумать, что было бы полезно добавить функцию DblClick для того, чтобы элементы смещаться из одного списка в другой без необходимости тащить, так что я добавил это:

$("#pageElements li").dblclick(function() { 
     copythis(this); 
    }); 

function copythis(elem) { 
    var selected = $(elem).closest("li").clone();  
    $("#pageItems").append(selected).html(); 
} 

Тогда я подумал, хорошо, теперь я хочу DblClick на pageItem и показать диалог для редактирования

так я добавил:

<div id="itemDialog"></div> 


$("#itemDialog").dialog({ autoOpen: false, modal:true }); 
$("#pageItems li").live("dblclick", function() { 
    openDialog(this); 
}); 

function openDialog(elem) { 
    $("#itemDialog").dialog('open'); 
} 

Тогда я думал, что я хочу кнопку, когда я наведите курсор мыши на элемент, чтобы позволить мне удалить, и я мог бы также иметь отредактировать маршрут там:

var removeButton = '<span class="buttons"><span class="ui-edit ui-state-default ui-corner-all ui-icon ui-icon-pencil" title="edit">Edit</span><span class="ui-remove ui-state-default ui-corner-all ui-icon ui-icon-closethick" title="remove">Remove</span></span>'; 

$("#pageItems li").live("mouseenter", function() { $(this).append(addButton); }).live("mouseleave", function() { $(this).find(".buttons").remove(); }); 

    $(".ui-remove").live("click", function() { $(this).closest("li").remove(); }); 

    $(".ui-edit").live("click", function() { 
     openDialog(this); 
    }); 

Так что теперь он был достаточно функциональным, я хотел затем добавить кнопку «добавить» к pageElement, так что я бы тогда 3 варианта сопротивления, DblClick и нажатием кнопки, так что добавление кода:

var addButton = '<span class="buttons"><span class="ui-add ui-state-default ui-corner-all ui-icon ui-icon-triangle-1-e" title="Add">Add</span></span>'; 

используется код из pageItem Ли «живой парения "снова:

$("#pageElements li").live("mouseenter", function() { $(this).append(addButton); }).live("mouseleave", function() { $(this).find(".buttons").remove(); }); 

$(".ui-add").live("click", function() { 
    copythis(this); 
}); 

I внесены изменения в copythis работать, чтобы обеспечить включение кнопок:

function copythis(elem) { 
    var selected = $(elem).closest("li").clone(); 
    selected.find(".buttons").remove(); 
    $("#pageItems").append(selected).html(); 
} 

И это, где я сейчас и проблема я в настоящее время работаю.

Если вы dblclickэлемент страницы, который скопирует элемент (как и ожидалось).

Если вы нажмете на кнопку добавления, которая также скопирует новый элемент (как и ожидалось).

потому что событие pageElement dblclick привязано к тегу pageElement li, а событие щелчка кнопки добавления находится в теге span, вложенном внутри него, если я нажимаю кнопку добавления быстро, иногда я получаю запуск события dblclick, добавляя больше чем один элемент в списке pageItem.

Что я хочу сделать, это создать мертвую зону для события dblclick, которое окружает элемент кнопки добавления.

Я открыт для любых идей.

Приветствия

Люк

Answer 1

ОК, поэтому я нашел ответ, возможно, не самый лучший, но он работает.

Он включает в себя определение глобальной переменной:

var clicked = 0; 

Тогда на живом случае пользовательский интерфейс, добавить установить значение 1, а затем установить тайм-аут, чтобы отложить сброс значения обратно в 0:

$(".ui-add").live("click", function() { 
     clicked = 1; 
     copythis(this); 
     setTimeout(function() { clicked = 0;}, 100); 
    }); 

Итак на моей функции pageElement DblClick:

$("#pageElements li").dblclick(function() { 
     if (clicked == 0) { 
      copythis(this); 
     } 
    }); 

Не идеально, но это работает.

Answer 2

Я знаю, что это далеко не полезно, но я бы не советовал слушать DblClick - это а) работает по-разному в разных клиентов - и JQuery не маскирует все это , б) вы не хотите, чтобы ваш пользователь дважды щелкнул, это сложно.