jQuery 检测鼠标是否在 mouseenter 和mouseleave之间单击

jQuery detect if mouse clicked between mouseenter and mouseleave

本文关键字：mouseleave 之间 单击 mouseenter 检测 鼠标 是否 jQuery      更新时间：2023-09-26

我正在为评级系统制作一个小脚本，目前有 3 个功能：

  1. 悬停：

    a. On mouse enter change the color of div depending on value
b. On mouse leave revert back to white

  2. 点击：

    a. On click save color change and put value in another div

    现在我需要检查在鼠标离开之前是否单击了其中一个div，因为我需要颜色与您离开div 时单击鼠标时的颜色相同（如果您选择了它）。

我将如何检查？

这是我的div 结构：

<div class='rating' data-target="tijd">
    <div class='circle'>1</div>//green
    <div class='circle'>2</div>//green
    <div class='circle'>3</div>//green
    <div class='circle'>4</div>//green
    <div class='circle'>5</div>//green
    <div class='circle'>6</div>//green
    <div class='circle'>7</div>//green
    <div class='circle'>8</div>//white
    <div class='circle'>9</div>//white
    <div class='circle'>10</div>//white
    <div class='score'><span id="tijd">7</span></div>
</div>

所以$('.circle').on('hover', function(e){}, function(e){})然后$('.circle').on('click', function(e){})，所以点击函数被鼠标离开函数覆盖，因为稍后调用 mouseleave 函数。

在"#tijd"跨度中，我保存了您单击的div 的值，在悬停时，我需要每个小于或等于跨度的div 更改为某种颜色，而大于该值的所有内容都是白色，如果您不单击任何内容，div 应使用仍在范围中的值再次着色。

（我试过检查点击时保存值的div 是否不为空，但它永远不会是空的）

$('.circle').hover(function(e) {
  $(this).siblings().css('background-color', 'white')
  val = parseInt($(this).text(), 10)
  $(this).prevAll('.circle').each(function() {
    if (val < 4 && val > 0)
      $(this).css('background-color', 'red')
    if (val < 7 && val > 3)
      $(this).css('background-color', 'orange')
    if (val < 11 && val > 6)
      $(this).css('background-color', 'green')
  })
  val = parseInt($(this).text(), 10)
  console.log(val)
  if (val < 4 && val > 0)
    $(this).css('background-color', 'red')
  if (val < 7 && val > 3)
    $(this).css('background-color', 'orange')
  if (val < 11 && val > 6)
    $(this).css('background-color', 'green')
}, function(e) {
  spanid = spanid = $(this).parent().attr('data-target')
  text = $('#' + spanid).text()
  console.log(text)
  if ($('#' + spanid) == '') {
    $(this).siblings('.circle').css('background-color', 'white')
    $(this).css('background-color', 'white')
  } else {
    val = parseInt(text, 10)
    if (val < 4 && val > 0)
      color = 'red'
    if (val < 7 && val > 3)
      color = 'orange'
    if (val < 11 && val > 6)
      color = 'green'
    $(this).prevAll('.circle').each(function() {
      if ($(this).text() <= text) {
        console.log('smaller or equal to')
        next.css('background-color', color)
      }
      if (text.val() == "") {
        $(this).css('background-color', 'white')
      } else {
        console.log('bigger')
        $(this).css('background-color', 'white')
      }
    })
  }
})
$('.circle').click(function(e) {
  console.log('get clicked')
  spanid = $(this).parent().attr('data-target')
  val = parseInt($(this).text(), 10)
  $('#' + spanid).text(val)
  console.log('Value = ' + val)
  next = $('#' + spanid).parent()
  if (val < 4 && val > 0)
    color = 'red'
  if (val < 7 && val > 3)
    color = 'orange'
  if (val < 11 && val > 6)
    color = 'green'
  next.css('background-color', color)
  $(this).prevAll('.circle').css('background-color', color)
})
.reviews {
  background-color: white;
  display: table;
  width: 100%;
}
.rating {
  display: table;
  table-layout: fixed;
  border-spacing: 10px;
}
.circle {
  display: table-cell;
  height: 25px;
  width: 25px;
  text-align: center;
  border: solid 2px black;
  border-radius: 100%;
  background-color: white;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="form-group col-md-10 col-md-offset-2">
  <label>Tarief</label>
  <div class='rating' data-target="tarief">
    <div class='circle'>1</div>
    <div class='circle'>2</div>
    <div class='circle'>3</div>
    <div class='circle'>4</div>
    <div class='circle'>5</div>
    <div class='circle'>6</div>
    <div class='circle'>7</div>
    <div class='circle'>8</div>
    <div class='circle'>9</div>
    <div class='circle'>10</div>
    <div class='score'><span id="tarief"></span>
    </div>
  </div>
</div>
<div class="form-group col-md-10 col-md-offset-2">
  <label>Reactietijd en bereikbaarheid</label>
  <div class='rating' data-target="tijd">
    <div class='circle'>1</div>
    <div class='circle'>2</div>
    <div class='circle'>3</div>
    <div class='circle'>4</div>
    <div class='circle'>5</div>
    <div class='circle'>6</div>
    <div class='circle'>7</div>
    <div class='circle'>8</div>
    <div class='circle'>9</div>
    <div class='circle'>10</div>
    <div class='score'><span id="tijd"></span>
    </div>
  </div>
</div>

我会用CSS和一个类来做到这一点：

  1. 使用 CSS :hover规则设置鼠标光标位于元素上时的颜色
  2. 单击时，在元素上设置一个类以指示它已被选中
  3. 基于该类设置元素样式

例： 

$(document.body).on("click", ".rating > .circle", function() {
  $(this).toggleClass("selected").siblings().removeClass("selected");
});
.rating {
  padding: 2px;
}
.rating .circle {
  padding: 6px;
  display: inline-block;
  width: 2em;
  text-align: center;
}
/* When hovering, use a yellow background */
.rating > .circle:hover {
  background-color: yellow;
}
/* Selected items have a blue background and white text */
.rating > .circle.selected,
.rating > .circle.selected:hover {
  background-color: blue;
  color: white
}
<div class="rating">
  <div class="circle">1</div>
  <div class="circle">2</div>
  <div class="circle">3</div>
  <div class="circle">4</div>
  <div class="circle">5</div>
  <div class="circle">6</div>
  <div class="circle">7</div>
  <div class="circle">8</div>
  <div class="circle">9</div>
  <div class="circle">10</div>
</div>
<div class="rating">
  <div class="circle">1</div>
  <div class="circle">2</div>
  <div class="circle">3</div>
  <div class="circle">4</div>
  <div class="circle">5</div>
  <div class="circle">6</div>
  <div class="circle">7</div>
  <div class="circle">8</div>
  <div class="circle">9</div>
  <div class="circle">10</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

假设元素的默认背景颜色定义为

div.rating .circle
{
   background-color: #000; 
}

悬停时颜色更改为

div.rating .circle:hover
{
   background-color: #ff0; 
}

在单击事件中，将另一个类设置为"选定"，以便在鼠标离开时颜色更改为#dedede; 

$( "div.rating .circle" ).click( function(){
   $( this ).toggleClass( "selected" );
} );
div.rating .circle.selected
{
   background-color: #dedede; 
}

同时定义selected类的悬停行为

div.rating .circle.selected:hover
{
   background-color: #dedede; 
}
我想在

鼠标输入和鼠标离开时添加和删除一个类并在单击时检查该类将是一种方便的方法。

//add and remove a focus class with the same css values as the active class
$('.yourclass').on('mouseenter',function(){
    $('.yourclass').addClass('focussed');
}).on('mouseleave',function(){
    $('.yourclass').removeClass('focussed');
});
//check only for clicks on the focussed element and add the active class
$('.yourclass.focussed').on('click',function(){
    $(this).addClass('active');
});
你可以

通过将.click()函数添加到jQuery来做到这一点，如下所示：

请注意，所有这些都是示例代码

.HTML

<div class="colors">
  <div class="red"></div>
  <div class="blue"></div>
  <div class="green"></div>
  <div class="yellow"></div>
  <div class="pink"></div>
</div>

.CSS

.red {
  background-color:red;
}
.blue {
  background-color:blue;
}
.green {
  background-color:green;
}
.yellow {
  background-color:yellow;
}
.pink {
  background-color:pink;
}
div {
  height:40px;
  width:40px;
}
div.colors {
  width:200px;
  height:40px;
}

j查询**

$( "div" ).not('.colors')
.mouseenter(function() {
    //do something
   })
.mouseleave(function() {
    //do something
  })
.click(function() {
  var color = $(this).css('background-color');
  alert(color);
});

Jsfiddle 示例

希望这有帮助！

您可以使用 jquerys .hover（） 函数代替 mousein mouseout。

.HTML 

<div class="boxy">
</div>
<div class="selected">
  <h1>Selected Color From Click</h1>
</div>

.CSS

* {box-sizing: border-box;}
.boxy{
  border: 2px solid #000;
  width: 400px;
  height: 400px;
}
.selected{
  border: 2px solid #000;
}

.JS

var colors = ["#34f23a", "#f8f8f1", "#31b1cc"];
var changecolors;
var colorIndex = 0;
$('.boxy').hover(function(){
  shuffle = true;
  $(this).css('background', colors[colorIndex]);
  changecolors = setInterval(function(){
    if (colorIndex < (colors.length - 1)){
      colorIndex += 1;
    } else {
      colorIndex = 0;
    }
    $('.boxy').css('background', colors[colorIndex]);
  },500);
}, function(){
  window.clearInterval(changecolors);
  $('.boxy').css('background', 'transparent');
});
$('.boxy').click(function(){
   var selectedColor = $(this).css('background');
   $('.selected').css('background', selectedColor);
});

JSFiddle 示例

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>js functions</title>
  <style>
    body { background-color:#101010; color: #aaa; text-align: center;}
    #holder{ width: 100%; height:100px; margin: 0 auto; display: inline-block;}
    #hover { position: relative; border: 1px dashed #333; width:100px; height:100px; display: inline-block;}
    #save  { border: 1px dashed #333; width:100px; height:100px; display: inline-block;}
  </style>
  <script>
    document.onreadystatechange = function()
    {
      
      var hover = document.getElementById("hover");
      var save  = document.getElementById("save");
      hover.onmouseover = function()
      {
        hover.style.background = "#f00";
      };
      hover.onmouseout = function()
      {
        hover.style.background = "#101010";
      };
      hover.onclick = function()
      {
        save.style.background = "#fff";
      };
    }
  </script>
</head>
<body>
  <div id="holder">
  <div id="hover">hover</div><div id="save">save</div>
   </div>
</body>
</html>

相关文章：