Question

当指针在图片上时，我需要每1秒控制一次日志x坐标，但我不知道如何从js代码更新“event”。

    //app.module
    import { AuthInterceptor } from './interceptors/auth-interceptor.service';

    import { HttpClientModule } from '@angular/common/http';

    import { BrowserModule } from '@angular/platform-browser';
    import { NgModule } from '@angular/core';
    import {BrowserAnimationsModule} from '@angular/platform-
     browser/animations';


    import { HttpModule } from '@angular/http';
    import { ReactiveFormsModule } from '@angular/forms';
    import { MatNativeDateModule } from '@angular/material';
    import { RouterModule, Routes } from '@angular/router';
    import { appRoutes } from './routes';
    import {HTTP_INTERCEPTORS} from '@angular/common/http';
    import { AuthGuard } from './guards/auth.guard';

    @NgModule({
      declarations: [
        AppComponent,
        CategoryComponent,
        ProductComponent,
        UploadComponent,
        RegistrationComponent,
        LoginComponent
      ],
      imports: [
        RouterModule.forRoot(appRoutes),
        BrowserModule,
        BrowserAnimationsModule,
        FormsModule,
        MatNativeDateModule,
        Material,
        HttpModule,
        HttpClientModule,
        ReactiveFormsModule
      ],
      providers: [
        CategoryService, 
        ProductService , 
        UploadService, 
        UserService, 
        AuthGuard, 
        {
          'provide': HTTP_INTERCEPTORS,
          'useClass': AuthInterceptor,
          'multi': true,
        },
    ],
      bootstrap: [AppComponent]
    })
    export class AppModule { }

function onPic(event) {
  let xOnPic = event.clientX;
  console.log(xOnPic);
  setTimeout(onPic, 1000);
}

.testDiv {
  width: 700px;
  height: 350px;
  background-image: url("./Pic/pic1.jpeg");
  background-repeat: no-repeat;
  background-size: 700px 350px;
}

Answer 1

您需要更频繁地举办活动。请使用onmousemove。如果要限制输出量，可以使用变量来完成。

＆＃13;

var wait = false

function onPic(event) {
  if (!wait) {
    wait = true;
    let xOnPic = event.clientX;
    console.log(xOnPic);
    setTimeout(() => wait = false, 1000);
  }
}

＆＃13;

.testDiv {
  width: 700px;
  height: 350px;
  background-image: url("./Pic/pic1.jpeg");
  background-repeat: no-repeat;
  background-size: 700px 350px;
}

＆＃13;

<!DOCTYPE html>
<html>

<head>
  <title>I have no title</title>
  <meta charset="UTF-8">
  <link rel="stylesheet" href="test.css">
</head>

<body>
  <div onmousemove="onPic(event)" src="./Pic/pic1.jpeg" class="testDiv">
  </div>
  <script src="test.js"></script>
</body>

</html>

＆＃13;

我应该注意，这只会在鼠标实际移动之间触发，但这是你通常想要的。

如果您总是想要更新，只需设置一个变量并每秒输出一次。

＆＃13;

let interval = null;
let xPos = 0;

function onEnter() {
  interval = setInterval(() => {
    console.log(xPos);
  }, 1000);
}

function onMove(event) {
  xPos = event.clientX;
}

function onLeave() {
  clearInterval(interval);
}

＆＃13;

.testDiv {
  width: 700px;
  height: 350px;
  background-image: url("./Pic/pic1.jpeg");
  background-repeat: no-repeat;
  background-size: 700px 350px;
}

＆＃13;

<!DOCTYPE html>
<html>

<head>
  <title>I have no title</title>
  <meta charset="UTF-8">
  <link rel="stylesheet" href="test.css">
</head>

<body>
  <div onmouseenter="onEnter(event)" onmousemove="onMove(event)" onmouseleave="onLeave(event)" src="./Pic/pic1.jpeg" class="testDiv">
  </div>
  <script src="test.js"></script>
</body>

</html>

＆＃13;

Answer 2

这是一个工作小提琴。只需使用mouseenter mouseleave和mousemove并设置Intervall。

JS fiddle

<强> HTML

<svg id="svg" class="pic">
</svg>

<强> JS

let mouseInPic = false;
let x;
$("#svg").on("mouseenter", () => {
  mouseInPic = true
})
$("#svg").on("mouseleave", () => {
  mouseInPic = false
})
$("#svg").on("mousemove", (e) => {
    x = e.clientX
})

 window.setInterval(function(){
 if(mouseInPic == true){
    console.log(x)
 }
}, 1000);

Answer 3

这里有一个本机JS实现，对更新进行1秒限制，因此它将每秒调整一次位置，但不会超过每秒。由于当鼠标悬停在元素上但没有移动时，如果没有鼠标事件就无法获得鼠标位置，如果鼠标移动到{{1}上，则需要记住鼠标的位置并将其存储到全局变量中。 }，只需更新新职位mousemove。使用xOnPic和mouseover检测鼠标是否在所选元素上，mousemove检测鼠标何时不在元素中，以便您可以停止打印到控制台。

＆＃13;

mouseout

＆＃13;

var xOnPic = 0
var mouseOverPic = false;
var tryingToUpdate = false;

function tryToUpdate(){
  if (!tryingToUpdate){
    tryingToUpdate = true
    console.log(xOnPic);
    setTimeout(onPic, 1000);
  }
}

function onPic(){    
    if (mouseOverPic){
      console.log(xOnPic);
      setTimeout(onPic, 1000);
    }else{
       tryingToUpdate = false;
    }
}

document.getElementById('Pic').addEventListener('mousemove',        function(e){
      xOnPic = e.clientX;
      mouseOverPic = true;
      tryToUpdate();
    });

document.getElementById('Pic').addEventListener('mouseover', function(e){
      xOnPic = e.clientX;
      mouseOverPic = true;
      tryToUpdate();
  });

document.getElementById('Pic').addEventListener('mouseout', function(e){
      xOnPic = ''; 
      mouseOverPic = false;
  });

＆＃13;

.testDiv{
  width: 700px;
  height: 350px;
  background-image: url("./Pic/pic1.jpeg");
  background-repeat: no-repeat;
  background-size: 700px 350px;
}

＆＃13;

Answer 4

使用的setInterval（onPic，1000）;

如何每秒更新“event.clientX”？

4 个答案: