Тип события цветного щелчка невозможен, если вызвано в контексте контекстного события

Question

Хорошо, это довольно сложно, поэтому я попытаюсь объяснить это хорошо.

У меня есть веб-приложение, где я хочу, чтобы мои пользователи меняли цвет фона некоторых div. Для этого я хотел бы использовать интерфейс выбора цвета, и я хочу использовать событие contextmenu для целевых divs, чтобы открыть его, поскольку у них уже есть другое поведение, связанное с событием click.

Итак, идея состоит в том, чтобы на экране был скрыт цвет ввода, привязать его событие click к событию contextmenu в целевых divs и изменить цвет фона целевых divs на событие изменения цвета входного типа.

Самое забавное: заключается в том, что когда я пытаюсь связать события, выбор цвета не открывается, если его событие click вызывается из обработчика события contextmenu, но оно выполняется, если вызвано изнутри события click.

Использование JQuery для кода простоты и cleariness

//this works perfectly, color picker opens 
$("#myTargetDiv").on("click", function() { 
    $("#inputTypeColor").trigger("click"); 
}); 

//this fails miserably 
$("#myTargetDiv").on("contextmenu", function() { 
    $("#inputTypeColor").trigger("click"); 
    return false; 
}); 

Самый странный факт является то, что, если я использую третий элемент передать событие, скажем, к примеру, что я зову к промежуточному типу входного текст, который передает вызов от myTargetDiv к inputTypeControl, событие клика в промежуточном элементе запускается (даже при вызове из обработчика события contextmenu), в то время как событие в цвете входного типа не срабатывает.

Но если вы нажмете прямо на текст промежуточного типа ввода, откроется набор цветов!

//If you right click on myTargetDiv "firing!" appears on console, but color picker doesn't opens 
$("#myTargetDiv").on("contextmenu", function() { 
    $("#intermediateElement").trigger("click"); 
    return false; 
}); 

//If you click on intermediateElement, however, the color picker opens!!! 
$("#intermediateElement")on("click", function() { 
    console.log("firing!"); 
    $("#inputTypeColor").trigger("click"); 
}); 

Я воспроизведен это поведение в Firefox и Chrome, и я не очень уверен, если это ожидаемая функция, ошибка в браузерах ввода внедренческого типа цвета или проблемы с обработкой с JQuery события (I еще не пробовал запускать сами события).

Кто-нибудь может дать некоторое представление по этому вопросу?

Answer 1

Итак, чтобы выполнить свое собственное меню контекстного, вы можете связать со следующим:

$("#firestarter").on("contextmenu", function(e) { 
    // Execute your menu with Color Picker Option 
    return false; 
    }); 

Это может быть что-то простое, как список, завернутым в DIV, или более сложный, как меню JQuery UI.

<div id="menu"> 
    <ul> 
    <li class="menuItem" id="menuOption-1" data-action="color" data-rel="#myColor">Select Color</li> 
    <li class="menuItem" id="menuOption-2" data-action="reset">Reset to Default</li> 
    </ul> 
</div> 

Теперь пользователь имеет что-то click на, которые могут быть перенесены:

$("#menu li.menuItem").on("click", function(){ 
    switch($(this).data("action")){ 
    case "color": 
     $("#menu").hide(); 
     var target = $(this).data("rel"); 
     $(target).trigger("click"); 
     break; 
    case "reset": 
     $("#menu").hide(); 
     // Do something else 
     break; 
    default: 
     $("#menu").hide(); 
    } 
}); 

я не нашел все детали на HTML5 input type='color'. Это хороший старт: https://www.w3.org/TR/html5/forms.html#color-state-%28type=color%29 Я подозреваю, что, поскольку диалог выбора цвета генерируется самим браузером, а также контекстным меню, я предполагаю, что это функция безопасности или контроля, которая предотвращает ее запуск с помощью типа «право-щелчок» мероприятие.

Answer 2

Хорошо, я нашел способ исправить эту функциональность.

Для запуска выбора цветных изображений через событие контекстного меню div.

Поскольку это событие не может вызывать событие цветного щелчка ввода (по причине неизвестно), целесообразным решением является добавление скрытого div, который появляется в позиции мыши, когда событие контекстного меню вызывается в целевом div.

Этот скрытый div представляет собой контекстное меню и может включать в себя сообщение: «щелкните, чтобы открыть подборщик цветов» или что-то в этом роде.

Затем вы присоединяете событие события ввода цвета к этому скрытому событию щелчка div.

Если вы выбрали другой клик, вы выбрали правильный выбор цвета, вы заставили пользователя сделать один щелчок более чем желательно (один щелчок правой кнопкой мыши, чтобы открыть поддельное контекстное меню, а другое - открыть панель выбора цветов), но функциональность работает в конце, и это вполне согласуется с запрошенным эффектом. еще применяется

Реальный вопрос:

Почему тип ввода цвета нажмите событие срабатывает, когда вызывается из любого другого обработчика событий нажмите но терпит неудачу, если вызывается из обработчика событий контекстного меню?

Answer 3

Некоторые события DOM требуют взаимодействия с пользователем уволят программным ,, т.е. вы можете вызвать click программно только в процессе обработки некоторых других click или keyup т.д.