javascript - 根据点击获取 'top' 和 'right' 位置

Question

我有一个带有下拉菜单的表格，当它在最后一行打开时被剪切了。为了解决这个问题，我找到了一种方法，将下拉菜单与父分隔线分离，然后通过传递顶部和右侧的值来定位下拉菜单。

我不知道如何获取它应该打开的位置的值，它应该就在触发下拉菜单的按钮下方。

Here a JSFiddle example

(function() {
  var dropdownMenu;
  console.log($(window).width());
  $(window).on('show.bs.dropdown', function(e) {     
    dropdownMenu = $(e.target).find('.dropdown-menu');
    $('body').append(dropdownMenu.detach());          
    dropdownMenu.css('display', 'block');
    dropdownMenu.css('position', 'fixed');
    dropdownMenu.css('top', '440px');
    dropdownMenu.css('right', '100px')
  });                                                   
  $(window).on('hide.bs.dropdown', function(e) {        
    $(e.target).append(dropdownMenu.detach());        
    dropdownMenu.hide();                              
  });                                                   
})(); 

ps.: 其中值是 440px 和 100px 应该是相对于触发下拉按钮的位置。

Answer 1

一种方法是使用 getBoundingClientRect()。它会给你你点击的元素的 x 和 y(以及其他一些东西)。我在 Chrome 和 Firefox 中都测试过，它是 cross browser compatible .

  $(window).on('show.bs.dropdown', function(e) {     
    dropdownMenu = $(e.target).find('.dropdown-menu');
    $('body').append(dropdownMenu.detach());          
    dropdownMenu.css('display', 'block');
    dropdownMenu.css('position', 'fixed');
    var topValue = e.relatedTarget.getBoundingClientRect().y
    dropdownMenu.css('top', topValue);
    var leftValue = e.relatedTarget.getBoundingClientRect().x
    dropdownMenu.css('left', leftValue);
  });  

Here is a fiddle.