我想通过 Default 在 ctrl + mousemove
上实现 mousemove
click
处理程序将始终存在。
积分:
click handler
会一直存在- 每当
用户
想要获取有关mouseover
的详细信息时,他必须按住ctrl
即mouseover + ctrl
否则默认click
将起作用 - 如何实现
mousemover + crl
?
当前代码中的问题:
- 每当我
单击
行并转到详细 View 时,随机鼠标悬停
被触发
失去事件
状态和数据。
这是我的代码笔: https://codepen.io/anon/pen/wEwopd
$(function(){
$('table tbody tr').on('mouseover',function(){ $('table tbody tr').removeClass('active');
$(this).addClass('active');
var data = $(this).data('column');
$('#dataView').html('<p style="color:#fff;font-size:18px;">'+data+'</p>');
});
$('table tbody tr').on('click',function(){
$(this).removeClass('active');
$(this).addClass('active');
var data = $(this).data('column');
$('#dataView').html('<p style="color:#fff;font-size:18px;">'+data+'</p>');
});
});
table{
border:1px solid #ccc;
border-collapse:collapse;
width:100%;
}
table thead,tbody td{
padding:20px;
}
#container{
width:100%;
}
#bothwrapper{
max-height:210px;
overflow-y:scroll;
width:65%;
float:left;
outline:1px solid #999;
}
#dataView{
float:right;
width:35%;
background:red;
height:200px;
outline:1px solid #999;
outline-offset: 10px;
}
/* table tbody tr:hover{
background:skyblue;
} */
.active{
background:skyblue;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="container">
<div id="bothwrapper">
<table border="1">
<thead>
<tr>
<th>name1</th>
<th>name2</th>
<th>name3</th>
<th>name4</th>
</tr>
</thead>
<tbody>
<tr data-column="first-coulmn">
<td>hello1</td>
<td>hello2</td>
<td>hello3</td>
<td>hello4</td>
</tr>
<tr data-column="second-coulmn">
<td>hello1</td>
<td>hello2</td>
<td>hello3</td>
<td>hello4</td>
</tr>
<tr data-column="third-coulmn">
<td>hello1</td>
<td>hello2</td>
<td>hello3</td>
<td>hello4</td>
</tr>
<tr data-column="fourth-coulmn">
<td>hello1</td>
<td>hello2</td>
<td>hello3</td>
<td>hello4</td>
</tr>
<tr data-column="fifth-coulmn">
<td>hello1</td>
<td>hello2</td>
<td>hello3</td>
<td>hello4</td>
</tr>
<tr data-column="sixth-coulmn">
<td>hello1</td>
<td>hello2</td>
<td>hello3</td>
<td>hello4</td>
</tr>
<tr data-column="seventh-coulmn">
<td>hello1</td>
<td>hello2</td>
<td>hello3</td>
<td>hello4</td>
</tr>
<tr data-column="eighth-coulmn">
<td>hello1</td>
<td>hello2</td>
<td>hello3</td>
<td>hello4</td>
</tr>
<tr data-column="nineth-coulmn">
<td>hello1</td>
<td>hello2</td>
<td>hello3</td>
<td>hello4</td>
</tr>
</tbody>
</table>
</div>
<div id="dataView">
</div>
</div>
最佳答案
您是否尝试像下面那样归档结果
稍微更改一下您的代码。
此代码仅在用户按下 CTRL 键并悬停时更改行颜色。
点击代码仍然可以改变颜色。
JavaScript
$(function(){
$('table tbody tr').on('mouseover',function(evt){
// Check if ctrl pressed
if (evt.ctrlKey){
$('table tbody tr').removeClass('active');
$(this).addClass('active').css("cursor","pointer");
var data = $(this).data('column');
$('#dataView').html('<p style="color:#fff;font-size:18px;">'+data+'</p>');
}else{
$(this).css("cursor","default");
}
});
$('table tbody tr').on('click',function(){
if($(this).hasClass("active")){
$(this).removeClass('active');
}else{
$('table tbody tr').removeClass('active');
$(this).addClass('active');
}
var data = $(this).data('column');
$('#dataView').html('<p style="color:#fff;font-size:18px;">'+data+'</p>');
});
});
JSFiddle:http://jsfiddle.net/synz/b4vgz609/
关于javascript - 如何为鼠标事件处理程序实现额外的按键,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/51914431/