Событие фокусировки JQuery Mobile для relatedTarget возвращает неверный результат в Safari

0

В соответствии с этим: https://developer.mozilla.org/en-US/docs/Web/Reference/Events/focusout

relatedTarget (только для чтения) - EventTarget (элемент DOM) - целевая получающая фокус.

Я предполагаю, что eventObject.relatedTarget должен указывать на элемент, который получит фокус.

пример

Вот код, который я использую: http://jsfiddle.net/DMINATOR/L38pG/

<div data-role="header">
    <h1>Page Title</h1>
</div><!-- /header -->

<div data-role="content">   
     <p>Click here: <textarea id="js-result" style="width:80%;vertical-align:top"></textarea></p>
    <div>Result <p id="result-of-click"></p></div>
</div><!-- /content -->

<div data-role="footer">
    <h4>Page Footer</h4>
     <div data-role="controlgroup" data-type="horizontal">
     <input data-icon="arrow-l" data-inline="true" type="button" name="btnMoveLeft" id="btnMoveLeft" value="Left" />
     <input data-icon="arrow-r" data-inline="true" type="button" name="btnMoveLeft" id="btnMoveRight" value="Right" />
     </div>
</div><!-- /footer -->

JS:

$("#js-result").focusout(function (eventObject) {

var relatedTarget = eventObject.relatedTarget;

var message = "[DEBUG] - [FOCUSOUT] - Result relatedTarget = " + relatedTarget + " id=" + relatedTarget.id;

$("#result-of-click").text(message);
console.log(message);

});

Запуск того же кода с разными браузерами: Opera и Safari дают разные результаты.

Действия по воспроизведению

  1. Нажмите на TextArea
  2. Нажмите кнопку "Вправо" в заголовке

Ожидаемый результат (см. Opera)

Opera: Изображение 174551

Safari: Изображение 174551 (По какой-то причине Safari указывает на главную страницу как на то, что будет сфокусировано)

Я пытаюсь скрыть/показать заголовок в зависимости от того, используется ли текстовая область, которую я использую, или нет, вот пример: http://jsfiddle.net/DMINATOR/LLcpR/

Вопрос

Является ли это ошибкой в jQuery (мобильный) или Safari? Есть ли обходной путь для этого, так что я мог бы найти кнопку, которая будет сфокусирована дальше?

  • 0
    Safari и Chrome Mobile дают одинаковый результат. По опубликованной ссылке неизвестно, поддерживает ли браузер Opera это событие.
  • 0
    Я не уверен, я пробовал это с Safari на iOS7 и Maverics, и результаты разные. Опера работает правильно, так как она основана на Chrome, но Safari работает не во всех случаях. Можете ли вы дать мне знать, какую версию Safari вы используете.
Показать ещё 7 комментариев
Теги:
safari
jquery-mobile
jquery-focusout

1 ответ

1
Лучший ответ

После некоторых исследований кажется, что это проблема с Mac OS (как настольной, так и мобильной).

Я сделал небольшой пример, чтобы продемонстрировать, что события фокуса не принимаются за кнопки! (он работает в Opera, Chrome, Firefox (в Windows, но не в Safari в Mac OS X): http://jsfiddle.net/DMINATOR/7EtJD/

<div id="foo" data-role="page">

<div data-role="header">
    <h1>Page Title</h1>
</div><!-- /header -->

<div data-role="content">   
     <p>Click here:</p>
    <input type="button" data-custom-selector-attribute="true" name="btnTest" class="my-custom-selector-class" id="btnTest" value="Test" />
    <p id="focus-attribute-result"></p>
    <p id="focus-class-result"></p>
    <p id="click-attribute-result"></p>
    <p id="click-class-result"></p>
</div><!-- /content -->


$(document).on('focus', "input[data-custom-selector-attribute='true']", function (e) {
$("#focus-attribute-result").text("Focus - Got attribute selector!");
});

$(document).on('focus', ".my-custom-selector-class", function (e) {
$("#focus-class-result").text("Focus - Got class selector!");
});

$(document).on('click', "input[data-custom-selector-attribute='true']", function (e) {
$("#click-attribute-result").text("Click - Got attribute selector!");
});

$(document).on('click', ".my-custom-selector-class", function (e) {
$("#click-class-result").text("Click - Got class selector!");
});

Был создан отчет об ошибке, созданный для jQuery, но он был закрыт, так как это не проблема с самим jQuery: http://bugs.jquery.com/ticket/7768

Сейчас он ждет разработчиков Web Kit (Apple) https://bugs.webkit.org/show_bug.cgi?id=22261

Прошло 4,5 года с момента появления этой ошибки. Предположительно, исправление прост (я смотрел патч), но кажется, что люди Apple (Darian, Alexey и т.д.) Не могут согласиться на это, и дебаты все еще продолжаются. Это делает webkit отличным от всего остального в Windows.

Я не забочусь о Safari на Mac или Windows, но, к сожалению, это влияет на Chrome на Windows, о котором я забочусь. См. Комментарий № 20 от Даниэля. Я настоятельно призываю людей Apple немного поразмыслить об этом. Это влияет на конечных пользователей.

Фактически это исправлено в Chrome сейчас (https://code.google.com/p/chromium/issues/detail?id=89708), но еще нет в Safari.

Поделиться

Ещё вопросы

Сообщество Overcoder
Наверх
Меню