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

Это довольно сложно, поэтому я постараюсь объяснить это как следует.

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

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

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

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

//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 (я сам не пробовал запускать события пока что).

https://jsfiddle.net/bardobrave/0z6ev4rd/1 Если вы нажмете FIRE! палитра цветов открывается, но если вы щелкнете по ней правой кнопкой мыши, палитра цветов не откроется, несмотря на то, что если вы щелкнете по тексту типа ввода, это произойдет.

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


javascript color-picker jquery event-handling jquery-events
person Bardo    schedule 27.01.2016    source источник
comment
Итак, кажется, что палитра цветов HTML5 реагирует только на click события и не может запускаться другими событиями. Повозившись со своей скрипкой, вы можете увидеть, как все загорается: jsfiddle.net/Twisty/0z6ev4rd/2 но поскольку это не событие щелчка, средство выбора не открывается. Так что, если вы хотите создать меню, которое создается, а затем выбирается параметр «Цвет», это сработает.   -  person Twisty    schedule 28.01.2016

Ответы (3)


arrow_upward
0
arrow_downward

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

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

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

<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 Я подозреваю, что, поскольку диалоговое окно выбора цвета создается самим браузером, а также контекстным меню, я Я предполагаю, что это функция безопасности или контроля, которая предотвращает его запуск при типе события щелчка правой кнопкой мыши.

person Twisty    schedule 28.01.2016

arrow_upward
0
arrow_downward

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

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

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

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

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

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

Настоящий вопрос все еще актуален:

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

person Bardo    schedule 28.01.2016

arrow_upward
0
arrow_downward

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

person Alex from Jitbit    schedule 28.10.2017