添加显示星号的单击事件后，它不会注册单击的位置

After adding a click event that shows a star, it does not register where it clicks

本文关键字：单击 位置 注册 事件 显示 添加      更新时间：2023-09-26

仅使用#seven.click方法，控制台打印触摸很好。然而，在我添加鼠标下来后，它没有注册。有时，如果我偶尔单击7div，它会注册，但这是不可靠的。

所以$document.mousedown和#seven.click都是独立工作的，但只有鼠标按下触发。

如何让它们同时工作?

$(document).ready( function() {
    $(document).on('mousedown', function(e) {
      $('.stars').show();
      $('.stars').css({'top': e.clientY - 15, 'left': e.clientX-15})
      .on('mouseup', function(e) {
        $('.stars').hide();
      });
    });
    $("#seven").click( function() {
        console.log("touch");
    });
});

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script src="script.js"></script>
</head>
<body>
<div id="containers">
  <img src="calc.jpg" />
  <img src="star.png" class="stars" id="myimg"/>
    <div id="screen"><span id="spScreen">0</span></div>
    <div id="seven" class="abs backGreen"></div>
    <div id="eight" class="abs backGreen"></div>
    <div id="nine" class="abs backGreen"></div>
    <div id="four" class="abs backGreen"></div>
    <div id="five" class="abs backGreen"></div>
    <div id="six" class="abs backGreen"></div>
    <div id="multiply" class="abs backGreen"></div>
</div>
</body>
</html>

基本上我想要一个图像出现在我点击，然后消失，但也在同一时间运行一个函数取决于我点击的地方。

检查下面的代码片段，看看它是否符合您的需求:

<html lang="en" ng-app="app">
<head>
  <meta charset="UTF-8">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.0/css/font-awesome.css">
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
  <style type="text/css">
    .star {
      position: absolute;
      font-size: 30px;
    }
    .box {
      width: 100px;
      height: 100px;
      color: #fff;
      float: left;
      text-align: center;
      font-weight: 700;
    }
    .box.red {
      background: #f00;
    }
    .box.green {
      background: #0f0;
    }
    .box.blue {
      background: #00f;
    }
  </style>
</head>
<body>
  <div class="box red" data-callback="redFunction"></div>
  <div class="box green" data-callback="greenFunction"></div>
  <div class="box blue" data-callback="blueFunction"></div>
  <div class="box red" data-callback="redFunction"></div>
  <div class="box green" data-callback="greenFunction"></div>
  <div class="box blue" data-callback="blueFunction"></div>
  <div class="box red" data-callback="redFunction"></div>
  <div class="box green" data-callback="greenFunction"></div>
  <div class="box blue" data-callback="blueFunction"></div>
  <div class="box red" data-callback="redFunction"></div>
  <div class="box green" data-callback="greenFunction"></div>
  <div class="box blue" data-callback="blueFunction"></div>
  <script type="text/javascript">
    function redFunction() {
      var boxes = $('.box.red').html('red!');
      setTimeout(function() {
        boxes.empty();
      }, 2000);
    }
    function greenFunction() {
      var boxes = $('.box.green').html('green!');
      setTimeout(function() {
        boxes.empty();
      }, 2000);
    }
    function blueFunction() {
      var boxes = $('.box.blue').html('blue!');
      setTimeout(function() {
        boxes.empty();
      }, 2000);
    }
    function onDocumentMouseDown(e) {
      var css = {
        top: e.pageY - 15,
        left: e.pageX - 15
      };
      $('<i class="fa fa-star star" />')
        .css(css)
        .appendTo('body');
      var $target = $(e.target);
      if ($target.data('callback')) {
        var callback = window[$target.data('callback')];
        if (typeof callback == 'function') {
          callback.apply(this);
        }
      }
    }
    function onDocumentMouseUp() {
      $('.star').remove();
    }
    $(document).on('mousedown', onDocumentMouseDown).on('mouseup', onDocumentMouseUp);
  </script>
</body>
</html>

这实际上对我来说很好:

http://jsfiddle.net/j6oz84rx/

我正在使用您的代码，除了我使用console.log代替您正在使用的.show调用。确保你的控制台中没有在鼠标按下后发生的错误。

$(document).ready( function() {
    $(document).on('mousedown', function(e) {
      console.log("working");
    });
    $("#seven").click( function() {
        console.log("touch");
    });
});

真的不确定你期待什么行为，但这里是一个猜测:

$(document).ready( function() {
    $('#some-container-more-specific-that-document')
      .on('mousedown', function(e) {
          $('.stars').show();
          $('.stars').css({'top': e.clientY - 15, 'left': e.clientX-15});
      })
      .on('mouseup', function(e) {
          $('.stars').hide();
      });
    $("#seven").click( function() {
        console.log("touch");
    });
});

$(document).ready( function() 
{
    $(document).on('mousedown', function(e) 
    {
      $('.stars').show();
      $('.stars').css({'top': e.clientY - 15, 'left': e.clientX-15});
    }).on('mouseup', function(e) {
        $('.stars').hide();
      });
    $("#seven").on("mousedown", function() {
        console.log("touch");
    });
});
相关文章：