Question

我想通过默认 mousemove处理程序在ctrl + mousemove上实现click，

点：

click handler将永远在那里
每当user要获取有关mouseover的详细信息时，他都必须持有ctrl，即mouseover + ctrl，否则为默认 {{1} }将起作用
我如何实现click？

当前代码中的

个问题：

每当我mousemover + crl行并进入详细信息视图时，随机click就是mouseover失去了triggered状态和数据。

这是我的代码笔： https://codepen.io/anon/pen/wEwopd

active

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

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/

如何为mouseevent处理程序实现附加按键

1 个答案: