pointer-events

by miSunLaughing

HTML

<!-- 展示区 -->
<div class="content">
  <div class="tips">
    <p>tips</p>
  </div>
</div>

<!-- 操作区 -->
<div id="action">
  <p class="action-info" id="auto">
    tips的鼠标事件属性默认为<span class="info">piinter-events:auto</span><br> 鼠标在白色虚线框中移动，观察效果，当鼠标移出(向右下方移动)白色虚线框的时候，tips还存在，这是因为tips触发了鼠标事件，冒泡到白色虚线框上，触发了白色虚框的鼠标操作事件
  </p>
  <p class="action-info" style="display:none" id="none">
    tips的鼠标事件属性更改为<span class="info">piinter-events:none</span><br> 鼠标在白色虚线框中移动，观察效果，当鼠标移出(向右下方移动)白色虚线框的时候，tips不存在，这是因为tips不能触发鼠标事件，白色虚框的鼠标事件正常触发。
  </p>
  <button class="action-change">切换为：<span>none</span></button>
</div>

CSS

html,
body {
  height: 100%;
  width: 100%
}

body {
  background: #20262E;
  padding: 20px;
  font-family: Helvetica;
}

.content {
  width: 50%;
  height: 50%;
  border: 1px dashed #fff;
  cursor: pointer;
}

.tips {
  display: none;
  position: absolute;
  left: 0;
  top: 0;
  background: #fff;
  border-radius: 4px;
  padding: 20px;
  font-size: 25px;
  text-align: center;
  transition: all 0.2s;
  margin: 0 auto;
  width: 300px;
}

.action-change {
  border-radius: 5px;
}

.action-info .info {
  margin: 0 5px;
  color: #fff;
}

.action-change:hover {
  background-color: #666;
}

JavaScript

// 添加鼠标移动事件
var $tips = $('.tips')
$('.content')
  .mouseover(function() {
    $tips.show();
  })
  .mousemove(function(e) {
    $tips.css({
      left: e.pageX,
      top: e.pageY
    })
  })
  .mouseout(function() {
    $tips.hide();
  })

$('button').on('click', function() {
  if ($(this).find('span').text() == 'none') {
    $tips.css({
      'pointer-events': 'none'
    })
    $(this).find('span').text('auto')
    $('#auto').hide()
    $('#none').show()
  } else {
    $tips.css({
      'pointer-events': 'auto'
    })
    $(this).find('span').text('none')
    $('#auto').show()
    $('#none').hide()
  }
})