MouseEvents don' t стреляют в тело, когда внутреннему отделению зафиксировали положение в Firefox

Посмотрите на этот пример
Вот код:
CSS:

div {
   position:fixed;
   top:100px;
   left: 320px;
   border: solid 1px blue;
}

JavaScript:

 var i = 1;
 $(document.body).mousemove(function() {
     $("#text").html(i++);
 });

HTML:

<body>
    <div>
      Test Text: 
      
    </div>
</body>

Этот код просто обновляет промежуток, в то время как мышь отодвинута тело. Это хорошо работает в Google Chrome, но в Firefox только обновляется промежуток, когда мышь отодвигается отделение, Чтобы отладить я изучил поджигателя и нашел, что высота тела 0, таким образом, мышь на самом деле не отодвигается, тело, но в теле Google Chrome покрывает целый документ.

Таким образом, Мой вопрос:

  1. , Который является правильным поведением? (хром или Firefox)?

  2. правильное поведение зарегистрирован где-нибудь?

Также удивительно, когда я включил этот код jsfiddle, хром начал вести себя как Firefox, кто-то может объяснить меня это необычное поведение также?

Править: Я знаю, что могу заставить код работать в обоих браузерах, добавив height:100% к телу, я хочу знать почему это различное поведение в браузерах и правильном.

0
nl ja de

3 ответы

Вы видите то, что продолжается, если вы добавляете этот css:

body { border: 1px solid red; }

I'm not entirely sure of the reasoning, but Chrome decides that the 'body' element should be the full height of the window, whereas Firefox collapses the body element to a single line. I believe the body collapsing is the correct behavior, because a 'block' element (such as <body> or <div>) should only be as tall as necessary to contain its contents (and since you made the inner div absolutely positioned, it won't take this into account in calculating its height).

The correct fix depends on your intended outcome, but you could use document or window instead of document.body because they represent the entire viewable window instead of just the actual <body> element.

You could also set your body to a specific height like 100%. Alternatively, once you add more content to the body (stuff that isn't absolutely positioned), it will "fill out" and cause the mousemove event to fire properly anyway, so you won't need any of these fixes.

3
добавлено
Эй спасибо за ответ, я знаю фиксацию, я в основном хочу знать о поведении и также почему хром ведет себя как Firefox, когда код добавляется, чтобы играть? почему это изменяет свое поведение?
добавлено автор Ankur, источник
Это не из-за iframe, проверьте эту связь dl.dropbox.com/u/44648654/stackoverflow/positionFixedTest/…
добавлено автор Ankur, источник
Хорошо поведение вызывается, как я упомянул из-за Chrome' s различие в том, как это обращается <тело> с элементом. Я полагаю, что Хром применяет нестандартный эффект к элементу тела, чтобы заставить его быть полной высотой. <Тело> элемент - элемент "блока" (у которого есть целая связка свойств что я can' t описывают здесь, но одно из тех свойств как, который он должен разрушиться, чтобы соответствовать его содержанию). Я верю ему doesn' t имеют тот же самый эффект в jsFiddle просто, потому что это находится в IFrame. Хром применяет полное воздействие высоты к главному окну, но не к IFrames.
добавлено автор Alex B, источник

Дополнительный к ответу Алекса я все еще интересовался различным поведением. Я нашел решение: в jsfiddle вы, как предполагается, не добавляете элемент 'тела' в HTML. Если вы удаляете это тогда, вы получаете то же самое поведение как с автономной страницей.

ОБНОВЛЕНИЕ: Это не имело место. Настоящая причина то, что автономная страница, пропущенная

<!DOCTYPE HTML>

декларация, которая вызвала различие в HTML вариантов.

2
добавлено
Моя жаль ошибка. Тогда я все еще don' t знают ответ для этого, и он прослушивает меня: (
добавлено автор peterfoldi, источник
Хорошо здесь это: в jsfiddle есть дополнительная линия, добавьте это к верхней части вашего документа, чтобы получить то же самое поведение на автономной странице:
добавлено автор peterfoldi, источник
Извините за спам, но я просто понял, что этот - также просто предположение: Я didn' t видят вашу non-jsfiddle страницу, потому что доступ Dropbox отключен здесь. Я надеюсь в это время, я прав.
добавлено автор peterfoldi, источник
нет, это don' t jsfiddle.net/bwd5m/15
добавлено автор Ankur, источник
спасибо, таким образом, это в основном html5 и html 4.01, спасибо, обновляет ваш ответ, я буду upvote это
добавлено автор Ankur, источник
да вы правы:)
добавлено автор Ankur, источник
Большой знать есть законная причина различия кроме Хрома, просто являющегося странным:) +1
добавлено автор Alex B, источник

Я не знаю почему, но это работы
Замененный document.body с документ в
$ (document.body) .mousemove (функция() {
Это также работает над Firefox.

0
добавлено
@Ankur, я добавил position:fixed снова
добавлено автор svineet, источник
возможно, это - потому что документ и document.body - то же самое в WebKit и представляют целый viewport. Но у Геккона, document.body только включает фактические элементы, и документ содержит целый viewport. Просто предположение.
добавлено автор svineet, источник
И я don' t знают то, что происходит с jsfiddle.
добавлено автор svineet, источник
эй вы удалили position:fixed , и также это не то, что я хотел знать, я хочу знать правильное поведение? пожалуйста, прочитайте мой полный вопрос снова
добавлено автор Ankur, источник
снова, пожалуйста, прочитайте мой полный вопрос, я знаю, что могу легко добавить высоту 100% к телу, и это будет работать в обоих браузерах, я хочу знать почему это необычное поведение
добавлено автор Ankur, источник
тогда, почему хром ведет себя как Firefox, когда код добавляется, чтобы играть? почему это изменяет свое поведение?
добавлено автор Ankur, источник
JavaScript Jobs — чат
JavaScript Jobs — чат
8 336 участник(ов)

JavaScript Jobs — чат для поиска работы и людей Правила оформления: https://teletype.in/@telegram-ru/r1WQe5F1m См. также: @mobile_jobs, @devops_jobs, @nodejs_jobs, @react_js, @angular_ru, @js_ru

JavaScript.ru
JavaScript.ru
7 932 участник(ов)

Сообщество сайта JavaScript.ru в Slack.

pro.js
pro.js
4 675 участник(ов)

Про JavaScript и NodeJS Invite: https://t.me/joinchat/Be4rsT5Rsgq30DHutjxXgA Правила: http://telegra.ph/ru-chat-rules-06-19 Вакансии только с ЗП, не чаще раза в неделю.

Верстка сайтов HTML/CSS/JS/PHP
Верстка сайтов HTML/CSS/JS/PHP
3 439 участник(ов)

Правила группы: напишите !rules в чате. Группа Вк: vk.com/web_structure Freelancer: @web_fl Веб Дизайн: @dev_design Маркетолог: @topmarkening Автор: @M_Boroda

JavaScript — русскоговорящее сообщество
JavaScript — русскоговорящее сообщество
3 269 участник(ов)

Рекомендуем сразу отключить уведомления Правила: https://rudevs.network/ByaMH6un7 См. также: @js_noobs_ru, @nodejs_ru, @typescript_ru, @react_js, @electron_ru Вакансии и поиск работы: @javascript_jobs

JavaScript Noobs — сообщество новичков
JavaScript Noobs — сообщество новичков
2 484 участник(ов)

Чат для новичков

Чат — Типичный Верстальщик
Чат — Типичный Верстальщик
1 080 участник(ов)

Основной канал: @tpverstak Обратная связь: @annblok Все ссылки на соц.сети проекта: http://taplink.cc/tpverstak ПРАВИЛА ЧАТА — https://teletype.in/@annblok/BygPgC3E7

javascript_ru
javascript_ru
915 участник(ов)

Сообщество любителей самого популярного языка программирования в мире. Чат основан в 2009 году. Логи: https://goo.gl/9EOeM7 Поддержка бота: @chat_linker (ссылка на репу внутри) Вам будут интересны @frontend_ru и @css_ru

jsChat
jsChat
603 участник(ов)

Чат посвященный программированию на языке javaScript Перед отправкой ссылки на Ваш контент посоветуйтесь с админом Все ссылки удаляются ботом автоматически

JavaScript for Zombies Chat
JavaScript for Zombies Chat
492 участник(ов)

Чат про JavaScript для настоящих zombie! Вход строго по приглашениям! Ссылка для строгих приглашений: https://t.me/joinchat/AAMBHz3Uyr0tuZ7VaB029g

All That JS
All That JS
417 участник(ов)

JS на русском

Веб-Технологи: UI/UX, Вёрстка, Фронтенд
Веб-Технологи: UI/UX, Вёрстка, Фронтенд
167 участник(ов)

Всё про веб-дизайн и вёрстку. А также: HTML, CSS, флекс и бутстрапы, шаблонизаторы, препроцессоры, методологии, аглифаеры, улучшаторы и обфускаторы. Обсуждаем темы юзабилити, устраиваем А/В тесты лендингов, и проводим аудит.

DTP :: @DTPublish
DTP :: @DTPublish
147 участник(ов)

Обсуждаемые темы: полиграфия, препресс, верстка, дизайн, иллюстрации, скрипты, плагины. Канал - @DTPublishing