3

私はhtmlボタンが特定の文字列をローカルホストソケットサーバー(またはconsole.logging)に送信し、それを解放すると別の文字列を送信しようとしています。送信自体はうまくいっているようですが、マウスダウンイベントはボタンを離したときにのみ発生します。

それはかなり些細なことのように思えるので、必要に応じて尋ねてください。しかし、私はそれを機能させることができないようです。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>
4

0 に答える 0