JS - 如何將事件從滾動發送到鼠標懸停

我有兩個單獨工作的代碼片斷，第一個允許拖放標記excel cell-like div，第二個會導致容器div在滾動鼠標時滾動向下和在滾動區域。JS - 如何將事件從滾動發送到鼠標懸停

我不能讓它們一起工作，只要容器div開始滾動拖動標記停止工作。它適用於鼠標稍微移動的情況，所以我知道標籤代碼需要被觸發，大概來自滾動代碼。

我已經試過各種，沿着線：

$('#xls_view').trigger('mouseover'); 

$(document).trigger('click');

創建行和標籤事件代碼：

xls.vals.push(vals); 
$('#xls_view').append('<div style="background-color:#DDD; width:30px;" class="cell tag pen">'+xls.vals.length+'</div>'); 
$('#xls_view').children().last().attr('data-row', xls.vals.length); 
for(var a=0;a<vals.length;a++) { 
    $('#xls_view .cell:nth-last-child('+(vals.length+3)+')').css({'border-bottom':'none'}); 
    $('#xls_view').append('<div class="cell tag sel">'+vals[a]+'</div>'); 
    $('#xls_view').children().last().attr('data-row', xls.vals.length); 
} 
$('#xls_view .cell:nth-last-child('+(vals.length+3)+')').css({'border-bottom':'none'}); 
$('#xls_view').children().last().css({'border-right':'1px solid black'}); 
$('#xls_view').append('<div class="cell_end"></div>'); 

$('.tag').unbind().mousedown(function(e) { 
    isMouseDown = true; 
    if($(this).data('tagged')) { 
     isTagged = false; 
     $(this).data({tagged:false}); 
     $('.sel[data-row="'+$(this).data('row')+'"]').css({'background-color':'#EEE'}); 
    } else { 
     isTagged = true; 
     $(this).data({tagged:true});    
     $('.sel[data-row="'+$(this).data('row')+'"]').css({'background-color':'#9dd6ff'}); 
    } 
}).mouseover(function() { 
    if (isMouseDown) { 
     if(isTagged) { 
      $(this).data({tagged:true}); 
      $('.sel[data-row="'+$(this).data('row')+'"]').css({'background-color':'#9dd6ff'}); 
     } else { 
      $(this).data({tagged:false}); 
      $('.sel[data-row="'+$(this).data('row')+'"]').css({'background-color':'#EEE'}); 
     } 
    } 
});

滾動代碼：

$(document).mouseup(function() { 
    isMouseDown = false; 
}).mousedown(function() { 
    isMouseDown = true; 
    autoScroll(); 
}).mouseleave(function() { 
    isMouseDown = false;   
}).mousemove(function(e) { 
    mouse.x = e.pageX; 
    mouse.y = e.pageY; 
}); 

function autoScroll() { 
    if(!isMouseDown) 
     return; 
    if((mouse.y > bottom_zone_start) && (mouse.y < bottom_zone_end)) { 
     document.getElementById("xls_view").scrollTop += 10; 
     // $('#xls_view').trigger('mouseover'); // - No luck 
    } else if((mouse.y < top_zone_end) && (mouse.y > top_zone_start)) { 
     document.getElementById("xls_view").scrollTop -= 10; 
     // $('#xls_view').trigger('mouseover'); // - No luck 
    } 
    setTimeout(function() { 
     autoScroll(); 
    },150); 
}

注：此與滾動條和鼠標滾輪無關。當鼠標位於頂部或底部區域時，容器將以編程方式滾動。思考Excel，拖動標記單元格，接近底部，並在標記時爲頁面「滾動」。它如此接近:-)

來源

2017-06-26 ChrisAdmin

你可以看到這段代碼，這將發生在鼠標滾動。

此外，如果你想只檢查鼠標滾動的事件上下，那麼你可以使用這個腳本：

// Firefox Browser 
$('#your-selector').bind('DOMMouseScroll', function(e){ 
    if(e.originalEvent.detail > 0) { 
     //scroll down 
    }else { 
     //scroll up 
    } 
}); 

//IE, Opera, Safari Browser 
$('#your-selector').bind('mousewheel', function(e){ 
    if(e.originalEvent.wheelDelta < 0) { 
     //scroll down 
    }else { 
     //scroll up 
    } 
});

$("p").clone().appendTo(document.body); 
 
$("p").clone().appendTo(document.body); 
 
$("p").clone().appendTo(document.body); 
 
$(window).scroll(function() { 
 
    $("span").css("display", "inline").fadeOut("slow"); 
 
});

<!doctype html> 
 
<html lang="en"> 
 
<head> 
 
    <meta charset="utf-8"> 
 
    <title>scroll demo</title> 
 
    <style> 
 
    div { 
 
    color: blue; 
 
    } 
 
    p { 
 
    color: green; 
 
    } 
 
    span { 
 
    color: red; 
 
    display: none; 
 
    } 
 
    </style> 
 
    <script src="https://code.jquery.com/jquery-1.10.2.js"></script> 
 
</head> 
 
<body> 
 
    
 
<div>Try scrolling the iframe.</div> 
 
<p>Paragraph - <span>Scroll happened!</span></p> 
 
    
 
</body> 
 
</html>

來源

2017-06-26 08:53:04

沒有什麼好後悔的，我可以標記所有行立刻在$（'。tag'）。trigger（'click'）上滾動，但我只希望鼠標指針下的單元格可以觸發，比如標籤代碼如何工作.... – ChrisAdmin

JS - 如何將事件從滾動發送到鼠標懸停

回答

相關問題