2016-01-17 2 views
0

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

HTML:

<body> 
    <div class="paper"></div> 
</body> 

CSS:

body{ 
    background-color: #F5F5F5; 
    margin:0px; 
    padding:0px;} 
.paper{ 
    width: 500px; 
    height: 200px; 
    box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23); 
    background-color: white;} 

и JS:

window.onload = function(){ 
      $('body').on('click',function(){ 
       console.log("click"); 
      }) 
     } 

Моя проблема заключается в том, что клик регистрируется только тогда, когда я нажимаю на наш следующий рядом с div; если я нажимаю ниже, ничего не происходит.

Я немного смущен этим, не является ли тело всей страницей? Если я изменяю фоновый цвет тела, весь фон в браузере получает этот цвет, но использование его с jQuery отличается?

(JQuery правильно загружен и нет журналов ошибок)

+2

Тело не всегда покрывает весь видовой экран, вам кажется, что он смешался с «документом» – adeneo

+0

Но в любом случае это кажется несовместимым с тем, что фон меняет цвет во всем окне просмотра. – lex82

+1

добавьте css 'html, body {min-height: 100%}' и повторите попытку.Посмотрите, что говорит adeneo о – charlietfl

ответ

0

Выбор на 'body' не может быть то, что вы ожидаете (вы можете документ вместо этого), но вот правильный синтаксис:

$('body').on('click', 'selector', function(){ 
    /* do something here */ 
}) 
+0

OP четко заявляет, что хочет нацелить тело – charlietfl

+0

Это тот же пример, который они пишут – Serginho

1

Попробуйте это:

$('html').on('click', function(){ 
    console.log('click'); 
}) 
0

Целевой документ

$(window).load(function() { 
$(document).on('click',function(){ 
      console.log("click"); 
alert("clicked"); 
     }); 
}); 

У вас должна быть обертка для загрузки или вы получите начальное значение неопределенного значения для $. Очевидно, что документ готов, но у вас есть загрузка в исходном сообщении.

0

попробовать this.this поможет вам

<html> 
<head> 
<title></title> 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script> 

</head> 
<body> 

<!-- js--> 
<script type="text/javascript"> 
$(document).ready(function(){ 
    $('body').click(function(){ 
     alert(" "); 
    }); 

}); 
</script> 

</body> 
</html> 

* Я предлагаю вам проверить ваш JQuery является working.simply положить alert(" ") и проверить его, прежде чем идти на огромный one.hope это помогает вам. ура !!!

0

Правильный путь для достижения желаемого эффекта, это поместить ваш обработчик щелчка на документе, например:

$(document).on('click',function(){ 
    console.log("click"); 
}); 

Теперь, также хотят, чтобы убедиться, что ваш код JavaScript находится в самом низу HTML файл, например:

<html> 
    <head> 
     // header content goes here 
    </head> 
    <body> 
     // body content goes here 
     <script src="https://code.jquery.com/jquery-2.2.0.min.js"></script> 
     <script> 
      $(document).on('click',function(){ 
       console.log("click"); 
      }); 
     </script> 
    </body> 
</html> 

Если вы не можете или не хотите поместить свой код JS в самом низу HTML, вы можете также обернуть щелчок ручку $(document).ready(), как это:

$(document).ready(function(){ 
    $(document).on('click',function(){ 
     console.log("click"); 
    }); 
}); 

См. this Fiddle для демонстрации.

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