Как отменить клик после изменения размера событий? - PullRequest
Новая
       9

Как отменить клик после изменения размера событий?

3 голосов
/ 19 апреля 2011

Я использую плагин JQuery UI изменяемого размера для изменения размера различных элементов div. Рассмотрим следующую HTML-страницу (со встроенным JS): 

<html>
<head></head>
<body>
<div id="site">
    <div>This element is resizable</div>
    <br />
    <div style="width: 200px;">This is another resizable element</div>
</div>

<!-- javascript includes -->
<script>
$(function() {
    $("#site div").click(function() {

        console.log("Clicked");    
        if($(this).hasClass("selected")) {
            $(this).removeClass("selected");
        }
        else {        // Currently not selected, so let's select it        
            $(this).addClass("selected").resizable({
                start: function(event, ui) {
                    console.log("Start");
                },
                resize: function(event, ui) {
                    console.log("Resize");
                },
                stop: function(event, ui) {
                    console.log("Stop");
                }
            });
        }
    });
});
</script>
</body>
</html>

Итак, то, что я пытаюсь выполнить в этом примере кода, довольно просто. Когда пользователь нажимает на div, вложенный в "#site", я хочу, чтобы div стал "selected". Таким образом, в этом примере, когда вызывается событие click для div, CSS-класс с именем «selected» будет добавлен в div, по которому щелкнули. В дополнение к щелчку div, пользователь может изменить размер div. Проблема возникает, когда пользователь изменяет размер выбранного div. Очевидно, что событие click срабатывает, когда пользователь впервые выбирает div, но событие click также запускается, когда пользователь щелкает и перетаскивает края div, чтобы изменить его размер. Событие click вызовет процедуру click и отменит выбор div. Это не то, что я хочу, чтобы произошло. Событие click срабатывает только после того, как сработали все события с изменяемым размером.

С учетом этого мой вопрос заключается в том, как я могу обработать этот сценарий, чтобы позволить пользователю щелкнуть и выбрать элемент div, а также разрешить изменение размера div, но не отменять его при перетаскивании и изменении размера div? Ваша помощь приветствуется. Заранее спасибо.

Ответы [ 3 ]

6 голосов
/ 19 апреля 2011

Хороший вопрос.Resizable использует пузырьки событий.Фактические ручки изменения размера являются внутренними элементами вашего изменяемого размера.Таким образом, проверка класса цели события даст вам то, что вам нужно.

http://jsfiddle.net/bmvDs/1/

$('#test').click(function(e){
    if(!$(e.target).is('.ui-resizable-handle')) // not if it is the handle
        $(this).toggleClass('selected');
}).resizable();
0 голосов
/ 19 апреля 2011

jQuery .one ваш друг!Это позволит один клик по каждому элементу с классом .foo. 

$(".foo").one("click", function() {
  alert("This will be displayed only once.");
});
0 голосов
/ 19 апреля 2011

Одним из вариантов может быть установка всех ваших div'ов как изменяемых с самого начала и обработка стилей при нажатии: 

$(function() {
    var resizables = $('#site div');
    resizables.resizable({

               start: function(event, ui) {
                    console.log("Start");

                    // Remove the selected class from all other divs first
                    resizables.each(function(){ $(this).removeClass('selected'); });

                    // Set this div as selected
                    ui.element.addClass('selected');
                    // Carry on doing whatever else you want to do

               },
               resize: function(event, ui) {
                    console.log("Resize");
               },
               stop: function(event, ui) {
                    console.log("Stop");
               }

    });
});
...