我如何在Jquery中使用鼠标事件
[英]How I can use mouse events with Jquery
问题描述
我正在尝试在聊天中配置用户列表，添加功能幻灯片，如下所示：http: //www.w3schools.com/jquery/tryit.asp?filename=tryjquery_slide_down类似的Facebook，当鼠标处于焦点上方时，聊天容器被慢慢隐藏
我在proyect中使用jquery-1.8.1.min.js并具有具有ID的主体容器，我可以配置这些事件，例如
$("mainContainer").someEvent(function () {
code...
}
我可以使用click，但是当我将光标放在其中时，我没有鼠标事件。
我需要.mousedown（）、. mouseleave（）、. mousemove（），hover（）等。是否需要使用其他库JS？
我希望像这样，绿色框是聊天中包含用户列表的容器
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("div").mouseenter(function(){
$("div").animate({
width: '+=100px'
});
});
$("div").mouseout(function(){
$("div").animate({
width: '-=100px'
});
});
});
</script>
</head>
<body>
<div style="background:#98bf21;height:100px;width:50px;position:fixed;right:0px;">
User1<br/>
User2<br/>
User3<br/>
User4<br/>
</div>
</body>
</html>
5 个解决方案
解决方案1
1 已采纳 2015-06-02 16:39:28
您可以执行以下操作：
$("body").on({
click: function() {
//...
}
mouseleave: function() {
//...
},
//other event, etc
}, "#yourthing");
解决方案2
1 2015-06-02 16:39:31
您可以尝试此操作，并可以根据需要使用任何其他鼠标事件：
$("#mainContainer").on('hover', function(){
$(selector).slideDown("slow");
}), function(){
$(selector).slideUp("slow");
});
解决方案3
1 2015-06-02 16:39:40
也许是这样的吗？ 鼠标悬停效果可能不需要任何JavaScript。
#mainConatiner { width: 300px; height: 30px; border: 1px solid #000; } ul { opacity: 0; transition: opacity 250ms ease; } #mainContainer:hover ul { opacity: 1; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="mainContainer"> Hover me! <ul> <li>User 1</li> <li>User 2</li> </ul> </div>
让我知道是否有帮助！ 祝好运。
解决方案4
0 2015-06-02 16:35:39
解决方案5
0 2015-06-02 16:55:00
您可以通过对多个事件调用相同的函数来像这样使用它：
$("mainContainer").on('click mouseenter',function (event) {
//This gives you what event happened, might be 'click' or 'mouseenter'
var type = event.type;
});
如何使用javascript计时来控制鼠标停止和鼠标移动事件
[英]How can I use javascript timing to control on mouse stop and on mouse move events
在 jQuery 中，鼠标事件触发错误的元素。 我怎样才能解决这个问题？
[英]in jQuery, mouse events trigger wrong element. How can I fix this?
如何在JavaScript中使用鼠标事件（mousedown，mousemove事件）模拟拖动事件
[英]How can i simulate drag event using mouse events(mousedown, mousemove events) in JavaScript
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.