document.getElementById('parent').onclick=function(e){
var e = e || window.event;
var elem = e.target;
var targetArea = document.getElementById('child_one');
if(targetArea.contains(elem)){
alert("在区域内");
}else{
alert("在区域外");
方法二：通过Jquery
$('#parent').click(function(e){
var e = e || window.event;
var elem = e.target;
if($(elem).is('#child_one') || $(elem).is('#child_one *')){
alert("在区域内");
}else{
alert("在区域外");
html实例:<!DOCTYPE html><html><head> <title>test</title> <style type="text/css"> #parent{ height:500px; width: 200px; border: 1px solid red; marg...
1.用$.contains判断
$(document).mousemove(function(e){
if($.contains($('.box')[0],e.target) || $.contains($('.box')[0]==e.target)){
alert('鼠标在box盒子里')}
else{alert('鼠标不在box盒子里')}
$.contains是jQuery里用来判断一个标签是否包含另一个标签的方法，其用法是$.contains(父元素，子元素）。但是$
也可以根据具体情况，设置大范围的id或class去指定对应的大范围。
// 指定点击的区域大范围为指定的id为box的盒子
// $('#box').mouseup(e => {
// 指定点击的区域大范围为整个document
$(document).mouseup(e => {
var _con = $('.btn_list'); // 设置目标区域
if (!_con.is(e.target) && _con.has(e
事件流：事件捕获阶段（外至内）–>处于目标阶段（事件响应到触发事件的最底层元素上）–>事件冒泡阶段（内至外，默认false冒泡）
事件委托：将一个元素的绑定事件委托到另一个 元素上
优点：减少内存的消耗、动态绑定事件
2.场景问题
一个ul下有十个li，需要每次点击li标签的时候，打印出被点击的li的innerHTML文本内容，如何做？
3.代码实现
人们最常见的惯
在某一实际项目中需要拖拽功能，并实现拖拽到某一元素内，执行响应的操作。这里给出一个鼠标是否在元素内的判别函数。其中obj为拖拽进的元素（而非拖拽的元素）。
// 判断鼠标是否落在一个块级元素内部
checkIn(obj) {
var x = Number(window.event.clientX) // 鼠标相对屏幕横坐标
var y = Number(window.event.clientY) // 鼠标相对屏幕纵坐标
var div_x = Number(obj.getBoun
