Question

我试图制作一个html按钮，将某些字符串发送到我的localhost套接字服务器。（甚至是console.logging），然后发布另一个字符串。发送本身似乎很顺利，但只有当我释放按钮时才会发生mousedown事件。

问问你是否愿意，因为我知道这似乎是一件非常微不足道的事情，但我似乎无法让它发挥作用。 onclick也仅在鼠标释放时有效。当我查看它时，我唯一可以找到的模糊相关的是w **** ing3schools，这个例子可以工作，但是如果我在我的代码中实现它作为测试它不会。

这是带有js代码的html，不用担心要求更多源代码^^

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width, initialscale=1, minimum-scale=1"> 
<link rel="stylesheet" href="css/reset.css" type="text/css">
<link rel="stylesheet" href="css/stylesheet.css" type="text/css">
<title>Project pong game</title>
<!-- SCRIPTS -->
<script
src="https://code.jquery.com/jquery-3.2.1.min.js"
integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="
crossorigin="anonymous"></script>
<script src="/socket.io/socket.io.js"></script>
<script src="js/script.js" type="text/javascript"></script>  
<script>
    var socket = io();
    function doorClicked(){
        socket.emit('door', function(data){
        socket.send("Door");
        });
    }
    function blueUpPressed() {
        socket.emit('blueMov', function(data){
        socket.send("1:0");
        });             
    }
    function redUpPressed() {
        socket.emit('redMov', function(data){
        socket.send("1:0");
        });              
    }
    function blueDownPressed() {
        socket.emit('blueMov', function(data){
        socket.send("0:1");
        });            
    }
    function redDownPressed() {
        socket.emit('redMov', function(data){
        socket.send("0:1");
        });             
    }
    function blueUpReleased() {
        socket.emit('blueMov', function(data){
        socket.send("0:0");
        });          
    }
    function redUpReleased() {
        socket.emit('redMov', function(data){
        socket.send("0:0");
        });              
    }
    function blueDownReleased() {
        socket.emit('blueMov', function(data){
        socket.send("0:0");
        });          
    }
    function redDownReleased() {
        socket.emit('redMov', function(data){
        socket.send("0:0");
        });        
    }
</script>
</head>
<body>    
<!-- BEGINSCHERM -->

<img src="img/red&blueglitch.gif" id="e-pong-logo" alt="logo e-pong"/>
<button id="startBtn">Start</button>
<div id="opacityLayer" class="team"></div>

<!-- Tutorial RED -->

<section id="tutorialRed1" class="team">
    <button id="nextRed2" class="nextBtnStyle red"></button>
</section>
<section id="tutorialRed2" class="team">
    <button id="nextRed3" class="nextBtnStyle red"></button>
</section>
<section id="tutorialRed3" class="team">
    <button id="nextRedStart" class="nextBtnStyle red"></button>
</section>

<!-- Tutorial BLUE -->

<section id="tutorialBlue1" class="team">
    <button id="nextBlue2" class="nextBtnStyle blue"></button>
</section> 
<section id="tutorialBlue2" class="team">
    <button id="nextBlue3" class="nextBtnStyle blue"></button>
</section> 
<section id="tutorialBlue3" class="team">
    <button id="nextBlueStart" class="nextBtnStyle blue"></button>
</section> 

<!-- BLUE TEAM -->

<section id="blueteam" class="team">
    <img class="glitchEffect" src="img/blueteamglitch.gif"/>
    <section id="booster">locked</section>
    <button id="blueUp" class="buttonStyle" onmousedown="blueUpPressed()" onmouseup = "blueUpReleased()"></button>
    <button id="blueDown" class="buttonStyle" onmousedown="blueDownPressed()" onmouseup = "blueDownReleased()"></button>
    <img id="startBlueTutorial" class="infoBtn" src="img/infoBtn.png"/>
</section>

<!-- RED TEAM -->

<section id="redteam" class="team">
    <img class="glitchEffect" src="img/redteamglitch.gif"/>
    <section id="booster">locked</section>
    <button id="redUp" class="buttonStyle" onmousedown="redUpPressed()" onmouseup = "redUpReleased()"></button>
    <button id="redDown" class="buttonStyle" onmousedown="redDownPressed()" onmouseup = "redDownReleased()"></button>
    <img id="startRedTutorial" class="infoBtn" src="img/infoBtn.png"/>
</section>

<!-- Tutorial 1/2 INFO -->

<section id="tutorialRedInfo" class="team"></section>

<!-- Tutorial 2/2 INFO -->

<section id="tutorialBlueInfo" class="team"></section>

</body>

mousedown事件与mouseup事件同时发生 - Javascript / HTML

0 个答案: