mousemoveイベント処理について質問です

Jqueryを使用し、HTML内のマウスの位置取得でmousemoveを使用しています。
特定の範囲内では、イベントは無視し、範囲外でイベントを発生させたいのですが、
うまく動きません。

###発生している問題・エラーメッセージ

エラーメッセージ

###該当のソースコード


<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>MouseMove-test</title>
<script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
<script>
$(document).ready(function () {
	var mouse = $(':not(.box2)');
	mouse.mousemove(function(){
   console.log("mousemoveイベント");
});
});
</script>
<style>
.box {
	width:300px;
	height:300px;
	border:1px solid #000;
	background:#f2f2f2;
	overflow:hidden;
}
	
.box2 {
	width:100px;
	height:100px;
	border:1px solid #ddd;
	background:#fff;
}
	
</style>
</head>
<body>

<div class="box">
<div class="box2">
box2の中身
</div>
</div>

</body>
</html>

###試したこと

var mouse = $('.box2');
にした場合、mousemoveはbox2内でのみ発生しますが、逆のbox2以外でmousemoveを発生させたく、上記コードのvar mouse = $(':not(.box2)');にしています。

###補足情報(言語/FW/ツール等のバージョンなど)
より詳細な情報

kei344

2016/09/09 14:12 編集

コードはそれぞれコードブロックで囲んでいただけませんか？ ```（バッククオート3つ）で囲み、前後に改行をいれるか、コードを選択して「<code>」ボタンを押すとコードブロックになります。

行動規範の内容に同意します

回答2件

ベストアンサー

質問の意味がよく理解できませんが、
bodyにmousemoveイベントを発生させるが、その中の一部(div2)には発生させないということでしょうか？

javascript
1$(function () {
2    $('.box2').on('mousemove',function(e){
3     e.stopPropagation();
4    });
5  $('body').on('mousemove',function(){
6    console.log("mousemoveイベント");
7  });
8});
9

投稿2016/09/09 14:38

yambejp

総合スコア114784

kerofu1977

2016/09/09 21:17

意図が伝わりづらくもうしわけありません。その通りです。div2では発生させない事が可能でしょうか。

行動規範の内容に同意します

yambejpさんとちょっと違うやり方で。（yambejpさんのコードも私のコードも.box2の範囲外でのみコンソールに「'mousemoveイベント'」が表示されます）

JavaScript
1$( function() {
2    $( window ).on( 'mousemove', function( e ) {
3        if ( $( e.target ).hasClass( 'box2' ) ) {
4            e.stopPropagation();
5            return;
6        }
7        console.log( 'mousemoveイベント' );
8    } );
9} );
10```**動くサンプル：**[https://jsfiddle.net/7e52h6c5/](https://jsfiddle.net/7e52h6c5/)