javascript - 使用 CSS 定位鼠标单击的左/右或顶部/底部

Question

我需要一个从鼠标点击位置打开的弹出窗口。从可用性的 Angular 来看，当点击发生在窗口边缘附近时，我正在调整 JS 弹出窗口的位置[点击的右侧/左侧和点击的顶部/底部]，如下所示:

function myfunc(e) {
let ele = document.getElementById('my-dialog');
ele.style["left"] =
  (window.innerWidth - e.pageX) < ele.offsetWidth ? e.pageX - ele.offsetWidth : e.pageX;
ele.style["top"] =
  (window.innerHeight - e.pageY) < ele.offsetHeight ? e.pageY - ele.offsetHeight : e.pageY; }

有没有一种方法可以只使用 CSS 来实现(或者有更好的 JS 解决方案来解决这个问题。)

最小工作代码示例 here .

Answer 1

查看工作演示:https://jsfiddle.net/drumperl/ce532rnf/

为了让它正常工作，我更改了 left 和 top 样式设置以添加“px”。根据规范，长度设置需要相对或绝对测量单位，如“px”、“%”或“em”。 https://developer.mozilla.org/en-US/docs/Web/CSS/length

function myfunc(e) {
    let ele = document.getElementById('my-dialog');

    var newLeft = (window.innerWidth - e.pageX) < ele.offsetWidth ? e.pageX - ele.offsetWidth : e.pageX;
    ele.style.left = newLeft + 'px';

    var newTop = (window.innerHeight - e.pageY) < ele.offsetHeight ? e.pageY - ele.offsetHeight : e.pageY;
    ele.style.top = newTop + 'px';
  }
  document.onclick = myfunc;

希望这对您有所帮助。