美文网首页
13.项目 1-博客前端:封装库--修缮拖拽

13.项目 1-博客前端:封装库--修缮拖拽

作者: 好像在哪见过你丶 | 来源:发表于2019-05-15 09:17 被阅读0次

    学习要点:

    1.问题所在
    2.设置代码

    本节课,我们学习了事件绑定之后,需要对已有的代码进行事件进行调整,然后根据现
    有的拖拽还存在一个微型 bug 进行进一步调整。

    一.问题所在

    将所有传统事件绑定全部修改为现代事件绑定,然后调试程序,发现了几个问题。第一
    个问题:1.阻止默认行为会阻止输入。2.safari 浏览器还会有拖出浏览器的问题。

    二.设置代码

    //获取目标点
    addEvent.fixEvent = function (event) {
    event.target = event.srcElement;
    return event;
    };
    //去除两边的空格
    function trim(str){
    return str.replace(/(^\s*)|(\s*$)/g, '');
    };
    //空 DIV 阻止默认行为
    if (trim(this.innerHTML).length == 0) e.preventDefault();
    //表单项无法拖拽
    if (e.target.tagName == 'H2') {
    addEvent(document, 'mousemove', move);
    addEvent(document, 'mouseup', up);
    } else {
    removeEvent(document, 'mousemove', move);
    removeEvent(document, 'mouseup', up);
    }
    //IE 无法输入的问题,将_this.setCapture();移入 mousemove 即可。
    //锁屏后防止,通过其他渠道拖拉页面滚动条
    addEvent(window, 'scroll', function () {
    document.documentElement.scrollTop = 0;
    document.body.scrollTop=0;
    });
    

    感谢收看本次教程!

    相关文章

      网友评论

          本文标题:13.项目 1-博客前端:封装库--修缮拖拽

          本文链接:https://www.haomeiwen.com/subject/lasuaqtx.html