javascript - 如何为鼠标事件处理程序实现额外的按键

Question

我想通过 Default 在 ctrl + mousemove 上实现 mousemove click 处理程序将始终存在。

积分:

• click handler 会一直存在
• 每当 用户 想要获取有关 mouseover 的详细信息时，他必须按住 ctrl 即 mouseover + ctrl 否则默认 click 将起作用
• 如何实现 mousemover + crl？

当前代码中的问题:

1. 每当我单击行并转到详细 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>

Answer 1

您是否尝试像下面那样归档结果

稍微更改一下您的代码。

此代码仅在用户按下 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/