我在理解事件系统方面有问题

Posted 2023-02-22

【中文标题】我在理解事件系统方面有问题

【英文标题】：I have a problem with understanding the event system

【发布时间】：2020-03-05 22:16:09

【问题描述】：

我有这个代码：

<template>

  <div class="chart"
       v-bind:style="chartStyleObject"
       v-on:mousedown.left="initHandleMousedown($event)"
       v-on:mouseup.left="initHandleMouseup()"
       v-on:mouseout="initHandleMouseup()">

    <div class="chartContent">
    </div>
    <!--   <div class="chartContent">  end   -->

  </div>
  <!--   <div class="chart">   end   -->

</template>

<script>
  import axios from 'axios';

export default

created () 
,

data () 
  return 
    ticket: null,

    chartStyleObject: 
      width: '500px',
      widthWrapper: '1600px',
      heightWrapper: '500px',
      height: '247px',
      marginTop: '15px',
      marginRight: '0px',
      marginBottom: '0px',
      marginLeft: '15px',
    ,

    XCoord: null,
    YCoord: null,

  
,

methods: 

  initHandleMousedown(event) 
    this.startMousedownXCoord = event.clientX;
    this.startMousedownYCoord = event.clientY;
    this.XCoord = event.clientX;
    this.YCoord = event.clientY;

    console.log('XCoord', this.XCoord);
    console.log('YCoord', this.YCoord);

    window.addEventListener('mousemove', this.initHandleMouseMove);
  ,

  initHandleMouseMove(event) 

      this.XCoord = event.clientX;
      this.YCoord = event.clientY;

      console.log('XCoord', this.XCoord);
      console.log('YCoord', this.YCoord);

  ,

  initHandleMouseup() 
    window.removeEventListener('mousemove', this.initHandleMouseMove);
  ,

  ,



</script>

<style scoped>

.chart
  position: relative;
  border-radius: 10px;
  padding: 27px 10px 10px 10px;
  background-color: #45788b;
  box-sizing: border-box;
  cursor: move;

.chart .chartContent
  position: relative;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  margin: 0 0 0 0;
  background-color: #2f2c8b;




</style>

html design consists of 2 blocks:
(parent and child)
The event is tied to the parent tag `<div class =" chart ">`
Also, the parent block has padding on all 4 sides:

如果您单击父块并用鼠标驱动（按住按钮）而不影响填充空间，则 mousemove 事件将毫无问题地触发。 但是一旦鼠标光标接触到填充区域，事件就会停止运行。 如果您单击填充，该事件也可以正常工作 - 但如果我将鼠标光标移动到填充之外的块空间（内部空间）上，它会停止工作 问： 为什么会发生这种情况 - 对于 js + nuxt.js，这种行为是否正常？

【问题讨论】：

@Alex 您能否详细说明赏金的具体用途？如果您只是想要一些指向 MDN 上相关部分的链接，您可以对我的回答发表评论，所以我假设您正在寻找更多的东西。

【参考方案1】：

我无法完全按照您对页面各个区域的描述，但我可以尝试解释一下我认为您所看到的内容。

关键是您有一个mouseout 侦听器，它会删除您的mousemove 侦听器。 mouseout 事件传播，这意味着即使 mouseout 发生在子元素上，它也会触发。与 mouseleave 形成对比，后者仅在事件发生在元素本身上时才会触发。

下面的示例说明了即使鼠标光标没有离开根元素，mouseout 侦听器将如何触发。只需将光标移到孩子之外就足够了。

document.getElementById('outer').addEventListener('mouseout', () => 
  document.getElementById('out').innerHTML += 'mouseout\n'
)

div 
  border: 1px solid;
  display: inline-block;
  padding: 20px;

<div id="outer">
  <div></div>
</div>
<pre id="out"></pre>

我怀疑当您观察到事件停止运行时，实际发生的是 mouseout 事件正在发生并且正在删除 mousemove 侦听器。

【参考方案2】：

短裙答案是正确的。我只是提供这个答案来说明如何使用您自己的代码来做到这一点。我唯一更改的行是v-on:mouseleave="initHandleMouseup()。请注意，我将其更改为 mouseout 到 mouseleave。

总结一下：

mouseleave 每个元素都会触发一次，无论其子元素如何 徘徊。 mouseout 每次元素被放弃时都会触发（无论是 将鼠标移开或悬停在其子级上）。

new Vue(
  el: "#app",
  template: `

  <div class="chart"
       v-bind:style="chartStyleObject"
       v-on:mousedown.left="initHandleMousedown($event)"
       v-on:mouseup.left="initHandleMouseup()"
       v-on:mouseleave="initHandleMouseup()">

    <div class="chartContent">
    </div>
    <!--   <div class="chartContent">  end   -->

  </div>
  <!--   <div class="chart">   end   -->

`,
  created: function() ,

  data() 
    return 
      ticket: null,

      chartStyleObject: 
        width: '500px',
        widthWrapper: '1600px',
        heightWrapper: '500px',
        height: '247px',
        marginTop: '15px',
        marginRight: '0px',
        marginBottom: '0px',
        marginLeft: '15px',
      ,

      XCoord: null,
      YCoord: null,

    
  ,

  methods: 

    initHandleMousedown: function(event) 
      this.startMousedownXCoord = event.clientX;
      this.startMousedownYCoord = event.clientY;
      this.XCoord = event.clientX;
      this.YCoord = event.clientY;

      console.log('XCoord', this.XCoord);
      console.log('YCoord', this.YCoord);

      window.addEventListener('mousemove', this.initHandleMouseMove);
    ,

    initHandleMouseMove: function(event) 

      this.XCoord = event.clientX;
      this.YCoord = event.clientY;

      console.log('XCoord', this.XCoord);
      console.log('YCoord', this.YCoord);

    ,

    initHandleMouseup: function() 
      window.removeEventListener('mousemove', this.initHandleMouseMove);
    
  
);

.chart 
  position: relative;
  border-radius: 10px;
  padding: 27px 10px 10px 10px;
  background-color: #45788b;
  box-sizing: border-box;
  cursor: move;


.chart .chartContent 
  position: relative;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  margin: 0 0 0 0;
  background-color: #2f2c8b;

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id='app'></div>

要查看 mouseout/mouseover 与 mouseenter/mouseleave 事件之间的区别，请参阅此演示（取自 jQuery documentation）：

var i = 0;
$("div.overout")
  .mouseout(function() 
    $("p", this).first().text("mouse out");
    $("p", this).last().text(++i);
  )
  .mouseover(function() 
    $("p", this).first().text("mouse over");
  );

var n = 0;
$("div.enterleave")
  .on("mouseenter", function() 
    $("p", this).first().text("mouse enter");
  )
  .on("mouseleave", function() 
    $("p", this).first().text("mouse leave");
    $("p", this).last().text(++n);
  );

div.out 
  width: 40%;
  height: 120px;
  margin: 0 15px;
  background-color: #d6edfc;
  float: left;


div.in 
  width: 60%;
  height: 60%;
  background-color: #fc0;
  margin: 10px auto;


p 
  line-height: 1em;
  margin: 0;
  padding: 0;

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="out overout">
  <p>move your mouse</p>
  <div class="in overout">
    <p>move your mouse</p>
    <p>0</p>
  </div>
  <p>0</p>
</div>

<div class="out enterleave">
  <p>move your mouse</p>
  <div class="in enterleave">
    <p>move your mouse</p>
    <p>0</p>
  </div>
  <p>0</p>
</div>