Событие JQuery .on ('dblclick') не срабатывает в firefox [duplicate]

Если вы используете машину Windows с загруженной электронной таблицей Excel, новый плагин mySql в Excel является феноменальным. Люди в Oracle действительно хорошо справились с этим программным обеспечением. Вы можете напрямую подключиться к базе данных из Excel. Этот плагин будет анализировать ваши данные и настраивать таблицы для вас в формате, совместимом с данными. У меня были некоторые файлы csv больших монстров данных для преобразования. Этот инструмент был большой экономии времени.

http://dev.mysql.com/downloads/windows/excel/

Вы можете делать обновления из Excel, которые будут заполняться в базе данных онлайн. Это очень хорошо работало с файлами mySql, созданными на ультра дешевом хостинге GoDaddy. (Обратите внимание, что когда вы создаете таблицу в GoDaddy, вам нужно выбрать некоторые нестандартные настройки, чтобы отключить доступ к базе данных в базе данных ...)

С помощью этого плагина у вас есть чистая интерактивность между вашей электронной таблицей XL и онлайн-хранилище данных mySql.

191
задан Pierre de LESPINAY 9 July 2015 в 16:03
поделиться

9 ответов

Отключенные элементы не запускают события мыши. Большинство браузеров будут распространять событие, происходящее из отключенного элемента, на дерево DOM, поэтому обработчики событий могут быть помещены на элементы контейнера. Тем не менее, Firefox не демонстрирует этого поведения, он просто ничего не делает, когда вы нажимаете на отключенный элемент.

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

<div style="display:inline-block; position:relative;">
  <input type="text" disabled />
  <div style="position:absolute; left:0; right:0; top:0; bottom:0;"></div>
</div>​

jq:

$("div > div").click(function (evt) {
    $(this).hide().prev("input[disabled]").prop("disabled", false).focus();
});​

Пример: http://jsfiddle.net/RXqAm/170/ (обновлено для использования jQuery 1.7 с prop вместо attr).

218
ответ дан Andy E 21 August 2018 в 07:27
поделиться
  • 1
    Небольшая вещь: если вы используете атрибут disabled без значения, это подразумевает HTML, а не XHTML, и в этом случае закрывающая косая черта не нужна. – Tim Down 23 June 2010 в 10:56
  • 2
    @Tim: действительно, это не нужно, но он по-прежнему действителен HTML. Это просто сила привычки, и мне кажется, что она выглядит лучше. – Andy E 23 June 2010 в 11:09
  • 3
    Thx Andy, это довольно умно. Разве нет проще? Вы знаете, почему отложенные входы не обрабатываются? – Pierre de LESPINAY 23 June 2010 в 12:54
  • 4
    Это не имеет смысла: любой другой элемент html обрабатывает события мыши, почему не отключенный элемент (например, mouseenter и т. Д.), – Augustin Riedinger 8 July 2015 в 13:03
  • 5
    Вы можете остановить отключенный элемент из «отбрасывания», ваши клики, поместив input[disabled] {pointer-events:none} в ваш CSS. Затем щелчок ведет себя так, как если бы вы нажали на родительский элемент. IMHO это самое простое, чистое решение, но, к сожалению, оно работает только для браузеров, которые поддерживают свойство CSS pointer-events: caniuse.com/#search=pointer-events – Doin 17 August 2015 в 20:30

здесь также выглядит хорошим кандидатом на этот вопрос

Выполнение события click на отключенном элементе? Javascript jQuery

jQuery('input#submit').click(function(e) {
    if ( something ) {        
        return false;
    } 
});
-2
ответ дан Community 21 August 2018 в 07:27
поделиться
  • 1
    Событие клика, вероятно, не произойдет при отключенных атрибутах. – Hello Universe 21 May 2018 в 21:42

Отключенные элементы «едят» клики в некоторых браузерах - они не отвечают на них и не позволяют захватить их обработчиками событий в любом элементе или в любом из его контейнеров.

IMHO - самый простой, Самый чистый способ «исправить» это (если вам действительно нужно зафиксировать клики на отключенных элементах, таких как OP), просто добавьте следующий CSS на вашу страницу:

input[disabled] {pointer-events:none}

Это сделает любой клики на отключенном входе попадают в родительский элемент, где вы можете их захватить в обычном режиме. (Если у вас есть несколько отключенных входов, вы можете поместить их в отдельный контейнер самостоятельно, если они еще не выложены таким образом - дополнительный <span> или <div>, скажем - просто сделать это


Недостатком является то, что этот трюк, к сожалению, не будет работать для старых браузеров, которые не поддерживают свойство CSS pointer-events. Он должен работать от IE 11, FF v3.6, Chrome v4): caniuse.com/#search=pointer-events

Если вам нужно поддерживать старые браузеры, Вам нужно будет использовать один из других ответов!

34
ответ дан Doin 21 August 2018 в 07:27
поделиться
  • 1
    Я не был уверен, что input[disabled] также будет соответствовать элементам, отключенным JavaScript (element.disabled = true;), но, похоже, это так. Во всяком случае, я нахожу уборщик input:disabled. – Martin 27 April 2016 в 10:18
  • 2
    Это похоже на хорошее решение, но для IE11 это не работает! Также вы говорите, что FF 38+ и Chrome 31+, но ваша ссылка caniuse говорит FF 3.6+ и Chrome 4+? – user764754 3 February 2017 в 10:23
  • 3
    @ user764754 ... моя ошибка, я не понимал, что мне нужно нажать & quot; Показать все & quot; на странице caniuse, чтобы получить более ранние версии браузера! Зафиксировали это. Что касается IE11, я просто протестировал его, и он отлично работает (см. jsfiddle.net/7kkszq1c/1 для кода, хотя по какой-то причине сайт jsFiddle не работал для меня в IE11, я пришлось вставлять его в файл .htm) – Doin 4 February 2017 в 22:11
  • 4
    Спасибо за обновление! Тем временем я также заметил, что он работает на веб-сайте в IE11, но не с jsfiddle. Возможно, из-за jsfiddle iframe ... – user764754 5 February 2017 в 12:22
  • 5
    @Protectorone: disabled является псевдоклассом, поскольку CSS 3: w3.org/TR/css3-selectors/#UIstates – Martin 12 July 2017 в 11:41

Возможно, вы можете сделать поле readonly и отправить submit, чтобы отключить все поля readonly

$(".myform").submit(function(e) {
    $("input[readonly]", this).attr("disabled", true);
});

, а вход (+ script) должен быть

<input type="text" readonly="readonly" name="test" value="test" />

$('input[readonly]').click(function () {
    $(this).removeAttr('readonly');
})
58
ответ дан Josh Crozier 21 August 2018 в 07:27
поделиться
  • 1
    +1, это достойное альтернативное предложение. Единственным недостатком является то, что поле ввода не будет принимать отключенный стиль, который варьируется между браузерами, поэтому было бы трудно заставить его выглядеть в соответствии с ожиданиями пользователя от отключенного ввода. – Andy E 24 June 2010 в 10:57
  • 2
    правда. Возможно, это можно было бы использовать с CSS? Но да, это не было бы похоже на нормальные допустимые поля ввода – Tokimon 29 June 2010 в 22:26
  • 3
    Отличное альтернативное решение. Мне нравится это лучше, потому что вы можете сделать любой необходимый стиль с помощью CSS (т. Е. Сделать его LOOK отключенным), но все еще доступны события. – Joshua 1 February 2011 в 05:43
  • 4
    Это был точный подход, который я искал +1 для этого – AndreL 28 April 2017 в 16:38

Вместо disabled вы можете использовать readonly. С помощью некоторого дополнительного CSS вы можете стилизовать ввод так, чтобы он выглядел как поле disabled.

На самом деле есть еще одна проблема. Событие change запускается только тогда, когда элемент теряет фокус, что не является логическим с учетом поля disabled. Возможно, вы вставляете данные в это поле из другого вызова. Для выполнения этой работы вы можете использовать событие «bind».

$('form').bind('change', 'input', function () {
    console.log('Do your thing.');
});
3
ответ дан mnille 21 August 2018 в 07:27
поделиться
  • 1
    Ввод ввода будет по-прежнему представлен с формой, если я не ошибаюсь – Pierre de LESPINAY 5 August 2016 в 08:48
  • 2
    Правильно. Затем он должен быть объединен с @npth anwsner. – Nykac 8 August 2016 в 12:27

Я нахожу другое решение:

<input type="text" class="disabled" name="test" value="test" />

Класс «отключен» immitate отключенный элемент по непрозрачности:

<style type="text/css">
    input.disabled {
        opacity: 0.5;
    }
</style>

И затем отмените событие, если элемент отключен, и удалить класс :

$(document).on('click','input.disabled',function(event) {
    event.preventDefault();
    $(this).removeClass('disabled');
});
-1
ответ дан npth 21 August 2018 в 07:27
поделиться
  • 1
    Часть JavaScript не работает для меня. Кроме того, он не отвечает на вопрос, так как речь идет о включении отключенного ввода. В этом примере, однако, он не отключается с самого начала и, таким образом, отправляется в submit. – Raimund Krämer 16 November 2015 в 15:08

$(function() {

  $("input:disabled").closest("div").click(function() {
    $(this).find("input:disabled").attr("disabled", false).focus();
  });

});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>

<div>
  <input type="text" disabled />
</div>

7
ответ дан Rejeesh Prarath 21 August 2018 в 07:27
поделиться
  • 1
    Но это не работает на FireFox - и это было целым! – GarethOwen 11 March 2016 в 11:23

Я бы предложил альтернативу - используйте CSS:

input.disabled {
    user-select : none;
    -moz-user-select : none;
    -webkit-user-select : none;
    color: gray;
    cursor: pointer;
}

вместо отключенного атрибута. Затем вы можете добавить свои собственные атрибуты CSS для имитации отключенного ввода, но с большим контролем.

13
ответ дан Ron Reiter 21 August 2018 в 07:27
поделиться
  • 1
    работает только с ie10, слишком много пользователей имеют ie9 / 8. поэтому не надежная альтернатива. – encodes 27 July 2012 в 13:43
  • 2
    Это по-прежнему вызывает публикацию поля при отправке формы, что во многих случаях нежелательно. – cimmanon 13 February 2015 в 14:11

ИЛИ сделайте это с помощью jQuery и CSS!

$('input.disabled').attr('ignore','true').css({
    'pointer-events':'none',
     'color': 'gray'
});

Таким образом, вы отключите элемент, и никакие события указателя не будут срабатывать, но он позволяет распространять, и если они отправлены, вы можете использовать атрибут «игнорировать» ', чтобы игнорировать его.

4
ответ дан sidonaldson 21 August 2018 в 07:27
поделиться
  • 1
    pointer-events работает только в IE11 – Precastic 12 May 2014 в 17:13
  • 2
    @Precastic, это правда, но он работает почти для всех других браузеров в этот момент, и вы можете использовать полигон для ie & lt; 11 . sidonaldson, почему бы не использовать прямой CSS для применения стилей? – KyleMit 27 October 2014 в 00:30
  • 3
    @KyleMit вы можете добавить класс, а не устанавливать стили, но это не то, о чем идет речь! Я предлагал только события указателей, которые по-прежнему являются хорошим и правильным ответом в зависимости от матрицы браузера, для которой вы строите. И спасибо всем, кто отметил этот ответ, что это отвратительно, потому что здесь нет ничего неправильного: / – sidonaldson 28 October 2014 в 17:42
  • 4
    @sidonaldson, Это хороший ответ, поэтому я также хотел бы, чтобы он был выше и выше. Я не знаю, что делает атрибут ignore . Но мой вопрос о CSS состоял в том, что я не думаю, что нам нужно, чтобы jQuery был средством применения CSS. Вы можете просто установить правило CSS, которое предназначено для одного и того же селектора, а также отключить события указателя. В этой скрипте jQuery и CSS должны делать то же самое, но CSS будет намного более результативным. – KyleMit 28 October 2014 в 18:11
  • 5
    @KyleMit ah, так как при условии, что форма будет отправлена, вам нужно как-то сообщить серверу игнорировать это поле, если оно содержит значение (поскольку мы отключили спуфинг). – sidonaldson 28 October 2014 в 18:28
Другие вопросы по тегам:

Похожие вопросы: