获取滑动条位置，动态调整对话框显示位置；为动态添加的button添加click事件

最新推荐文章于 2021-06-28 14:48:49 发布

十一路客

最新推荐文章于 2021-06-28 14:48:49 发布

阅读量1k

点赞数

分类专栏： JS 文章标签：对话框 click 动态绑定

本文链接：https://blog.csdn.net/xyr05288/article/details/56291886

版权

JS 专栏收录该内容

63 篇文章 0 订阅

订阅专栏

1.获取滑动条位置，动态调整对话框显示位置

应用场景：页面上有三个按钮，所处位置高度不同，有的按钮需要移动滑动条才能看到，各个按钮点击后要弹出同一个对话框，为了保证对话框始终显示在当前视野的中央位置，需要先获取滑动条位置，再设置对话框弹出位置，然后再显示对话框。

代码如下：

//点击上传文件按钮，打开上传文件对话框
function onClickBtn(inputElementId){
    document.getElementById("inputElementId").value = inputElementId;

    //根据input元素ID确定对话框中的文字提示
    var str = "";
    if(inputElementId == "type1"){
        str = "btn_tip1";
    }else if(inputElementId == "type2"){
        str = "btn_tip2";
    }else if(inputElementId == "type3"){
        str = "btn_tip3";
    }else{
        str = "btn_tip";
    }

    //根据点击的按钮的不同 对话框做不同的提示
    $("#dialogTipInfo").html(str);

    var scrollXYArr = getPageScroll();
    var scrollX = scrollXYArr[0];
    var scrollY = scrollXYArr[1];
    var windowSize = getWindowSize();
    var windowSizeX = windowSize.w;
    var windowSizeY = windowSize.h;

    var left = scrollX + windowSizeX*0.4 + 'px';
    var top = scrollY + windowSizeY*0.3 + 'px';

    //根据当前滚动条的位置和窗口大小动态设置对话框的位置
    document.getElementById("dlgBody").style.left = left;
    document.getElementById("dlgBody").style.top = top;
    //alert("left: " + left + "; top: " + top);

    //清空之前文件输入
    document.getElementById("attachment").value = "";
    $("#dlg").css("display","");
} 

//获取滚动条的位置
function getPageScroll() {
    var xScroll, yScroll;
    if (self.pageYOffset) {
        yScroll = self.pageYOffset;
        xScroll = self.pageXOffset;
    } else if (document.documentElement && document.documentElement.scrollTop) { // Explorer 6 Strict
        yScroll = document.documentElement.scrollTop;
        xScroll = document.documentElement.scrollLeft;
    } else if (document.body) { // all other Explorers
        yScroll = document.body.scrollTop;
        xScroll = document.body.scrollLeft;
    }
    var arrayPageScroll = new Array(xScroll, yScroll);
    return arrayPageScroll;
}

//取当前浏览器width height
function getWindowSize(){
    var w = 0;
    var h = 0;
    if(document.documentElement && document.documentElement.clientHeight) {
        w = document.documentElement.clientWidth;
        h = document.documentElement.clientHeight;
    } else if (document.body && document.body.clientHeight) {
        w = document.body.clientWidth;
        h = document.body.clientHeight;
    } else if(window.innerHeight) {
        w = window.innerWidth;
        h = window.innerHeight;
    }
    return {
        w: w,
        h: h
    };
}

2.通过js动态添加的button，不能直接在添加button语句后，直接定义click事件,必须按照下面语句添加click响应事件

//不能在追加元素后 绑定
$(document).on('click','.myBtnCls',function(){
      var eleId = this.parentNode.children[0].id;
      onClickBtn(eleId);
});

对于以下两种绑定click事件的方式：

$(document).on('click','.classname',function(){});
$('.classname').on('click',function(){});

区别为：
$(document).on是把事件委托到document上，$('className').on是把事件绑定到.className元素上。效率方面，直接绑定在元素上会更为高效，绑定在document上，每次document有点击动作，浏览器都会判断当前点击的对象，如果匹配，再决定要不要执行，多了一个判断的环节。但在目前开发中，JS渲染效率很高，所以此异同基本可以忽略不计。
此外，针对$(document).on的触发特点，延伸一下，$("className").on为onclick绑定，只有在页面onload的时候执行一次，当页面重画(比如js动态添加的一些元素)后，新加载的具有className的元素便没有事件绑定到上面了，相反$(document).on这种方法会刷新和重新赋予绑定操作，所以一定程度上更为全面。
这就对标题二提出的解决方案给出了完美的解释。