Какова область действия тела HTML?

Я изучаю Javascript.Какова область действия тела HTML?

<input type="button" onclick="addP();">

Эта линия работает отлично. Могу ли я добавить событие click к телу, как это?

<body onclick="addP();">

Когда я нажимаю, у меня ничего не появляется. Но если я добавляю ширину и высоту тела, это сработало! Но только в ограниченном объеме. Если вы добавите цвет фона, он будет охватывать все окна. Цвет указывает область видимости окна, но не доступен для кликов (я не знаю, существует ли это слово «clickable», надеюсь, вы поймете). я не могу голосовать, потому что моя репутация не enough.I сделает это позже ...

источник

2015-05-25 xxkkk

Можете ли вы предоставить нам код для тела? Нет смысла публиковать код, который отлично работает – Luke

@Luke – xxkkk

если ваш html хорошо сформирован, добавление события click к 'body' будет запускаться в любом месте, которое вы нажимаете на странице, у вас нет более прямого элемента, на который вы нажимаете, что предотвращает пузырирование события –

Поскольку не полностью рабочий пример, вот один, где я установить html и body теги быть 100% ширина и высота, что делает его кликабельны в любом месте на экране.

Затем я использую EventTarget.addEventListener() вместо встроенных обработчиков событий (например, onclick=''), которые лучше использовать в большинстве случаев.

И наконец, я создаю p элемент (который я предполагаю, ваша addP() функция делает), используя метод document.createElement() DOM, добавить текст к нему, а затем добавить его к document.body элементу с Node.appendChild().

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

<!doctype html> 
<html> 
<head> 
<title></title> 
<style> 
html, body { 
    height: 100%; 
    width: 100%; 
    padding: 0; 
    margin: 0; 
} 
</style> 
<script> 
window.addEventListener('load', function ol(){ 
    document.body.addEventListener('click', function cl(){ 
     var p = document.createElement('p'); 

     p.textContent = 'Hello World!'; 

     document.body.appendChild(p); 
    }); 
}); 
</script> 
</head> 
<body> 
</body> 
</html>

http://jsfiddle.net/m3ssssvp/2/

источник

2015-05-25 01:12:17

Не согласен с несовместимостью addEventListener с IE 8 и ранее. Сайт разработчика mozilla предоставляет подробную информацию и полисы https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener#Browser_compatibility – jeff

Я буду голосовать позже, не хватит репутации ... Спасибо – xxkkk

@ jeff. Для записи [не является «Node.textContent'] (https://developer.mozilla.org/en-US/docs/Web/API/Node/textContent). –

-3

попробуйте расширить телу полностью

document.getElementsByTagName('body')[0].style.height = '100%'; 
document.getElementsByTagName('body')[0].style.width = '100%';

триггер это право, когда документ загружается, или если вы знаете CSS , используйте этот эквивалент.

источник

2015-05-25 01:06:24 oMiKeY

jQuery не помечен в этом вопросе, и если вы планируете дать решение jQuery, я бы рекомендовал четко указать, что это jQuery, поскольку он не помечен. – NewToJS

он использует функцию, поэтому он знает javascript. теперь это должно быть хорошо. – oMiKeY

Спасибо за вашу помощь – xxkkk

Какова область действия тела HTML?

ответ

Смежные вопросы