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

Question

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

悬停时：

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

点击：
```
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){}) 所以 click 函数被 mouse-leave 函数覆盖，因为 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>

Answer 1

我会用 CSS 和 class:

使用 CSS :hover 规则设置鼠标光标悬停在元素上时的颜色
单击时，在元素上设置 class 以指示它已被选中
根据 class

示例：

$(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>

Answer 2

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

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

悬停颜色变为

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

在点击事件中设置另一个 class 'selected' 所以当鼠标离开时颜色变为 #dedede;

$( "div.rating .circle" ).click( function(){

   $( this ).toggleClass( "selected" );

} );

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

也为 selected class 定义悬停行为

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

Answer 3

我想在鼠标进入和鼠标离开时添加和删除 class 并在单击时检查 class 是一种方便的方法。

//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');
});

Answer 4

您可以通过将 .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;
}

jQuery**

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

Jsfiddle example

希望对您有所帮助！

Answer 5

您可以使用 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 Example

Answer 6

<!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>

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

jQuery detect if mouse clicked between mouseenter and mouseleave

javascript

jquery

mouseevent

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

HTML

CSS

jQuery**