kindeditor编辑器点中图片滚动条往上顶的bug


Posted in Javascript onJuly 05, 2015

比如现在我插入两张图片,

kindeditor编辑器点中图片滚动条往上顶的bug

无论我点击哪张图片,里边的滚动条都会往上顶。

本来以为往上会有解决方法,一查结果没有;然后想着去官网查查,然而什么都没有,想到官网提交这个bug,结果没地方提交。

怎么解决,如果单是解决这个bug,去研究源码,我觉的是吃力不讨好的。

然后我就直接从 click、mousedown 这两个事件找起,找它们获得高度的地方,然后 感觉是的话就console.log下,看是不是。然后就找到了。

在这个函数里

pos : function() {
var self = this, node = self[0], x = 0, y = 0;
if (node) {
if (node.getBoundingClientRect) {
var box = node.getBoundingClientRect(),
pos = _getScrollPos(self.doc);
x = box.left + pos.x;
y = box.top + pos.y;
} else {
while (node) {
x += node.offsetLeft;
y += node.offsetTop;
node = node.offsetParent;
}
}
}
return {x : _round(x), y : _round(y)};
},

主要就是 那个box.top这里,不知道为什么,其他调用的时候都没问题,就是点击图片的时候它就变成负数,估计它是获得img的距离document的高度,而不是当前鼠标点击的地方距离document的高度,或者其他。

所以我就在得到y之前去判断box.top是否>0,然后将其等于0。然而并没有效果。即:box.top= box.top<0 ? 0 : box.top;

不行我就直接在y=box.top + pos.y 这改, y = (parseInt(box.top) < 0 ? 0 : box.top) +pos.y;

这个bug解决了,但不知道哪里会出现问题。所以 改的时候 请多测测。反正 我是没找到有问题的地方,有的话,记得提醒哦。谢谢。

以上所述就是本文的全部内容了,希望能给有相同需求的小伙伴们一些帮助。

Javascript 相关文章推荐
prototype class详解
Sep 07 Javascript
jQuery弹性滑动导航菜单实现思路及代码
May 02 Javascript
JS分页控件 可用于无刷新分页
Jul 23 Javascript
jQuery实现div拖拽效果实例分析
Feb 20 Javascript
React.js入门实例教程之创建hello world 的5种方式
May 11 Javascript
Bootstrap CSS组件之输入框组
Dec 17 Javascript
微信小程序 功能函数小结(手机号验证*、密码验证*、获取验证码*)
Dec 08 Javascript
JS+WCF实现进度条实时监测数据加载量的方法详解
Dec 19 Javascript
vue-awesome-swiper 基于vue实现h5滑动翻页效果【推荐】
Nov 08 Javascript
vue  directive定义全局和局部指令及指令简写
Nov 20 Javascript
微信小程序分享海报生成的实现方法
Dec 10 Javascript
使用webpack4编译并压缩ES6代码的方法示例
Apr 24 Javascript
jQuery插件pagewalkthrough实现引导页效果
Jul 05 #Javascript
IE浏览器下PNG相关功能
Jul 05 #Javascript
jQuery的Scrollify插件实现滑动到页面下一节点
Jul 05 #Javascript
javascript实现控制的多级下拉菜单
Jul 05 #Javascript
javascript遇到html5的一些表单属性
Jul 05 #Javascript
浅谈angularJS 作用域
Jul 05 #Javascript
javascript 应用小技巧方法汇总
Jul 05 #Javascript
You might like
PHP网页游戏学习之Xnova(ogame)源码解读(六)
2014/06/23 PHP
Yii2框架视图(View)操作及Layout的使用方法分析
2019/05/27 PHP
PHP7移除的扩展和SAPI
2021/03/09 PHP
Valerio 发布了 Mootools
2006/09/23 Javascript
javascript题目,重写函数让其无限相加
2012/02/15 Javascript
基于javascipt-dom编程 table对象的使用
2013/04/22 Javascript
7款吸引人眼球的jQuery/CSS3特效实例分享
2013/04/25 Javascript
简单的Jquery全选功能
2013/11/07 Javascript
浅析Node.js查找字符串功能
2014/09/03 Javascript
jQuery表格插件datatables用法详解
2020/11/23 Javascript
AngularJS学习笔记之依赖注入详解
2016/05/16 Javascript
Node.js中npm常用命令大全
2016/06/09 Javascript
JavaScript中捕获/阻止捕获、冒泡/阻止冒泡方法
2016/12/07 Javascript
JS正则验证多个邮箱完整实例【邮箱用分号隔开】
2017/04/19 Javascript
AngularJS实现动态添加Option的方法
2017/05/17 Javascript
原生JS实现N级菜单的代码
2017/05/21 Javascript
详解Vue中过度动画效果应用
2017/05/25 Javascript
薪资那么高的Web前端必看书单
2017/10/13 Javascript
jQuery实现的点击标题文字切换字体效果示例【测试可用】
2018/04/26 jQuery
angular4笔记系列之内置指令小结
2018/11/09 Javascript
js取小数点后两位四种方法
2019/01/18 Javascript
[原创]微信小程序获取网络类型的方法示例
2019/03/01 Javascript
django使用LDAP验证的方法示例
2018/12/10 Python
解决Python下json.loads()中文字符出错的问题
2018/12/19 Python
HTML5是什么 HTML5是什么意思 HTML5简介
2012/10/26 HTML / CSS
html5指南-1.html5全局属性(html5 global attributes)深入理解
2013/01/07 HTML / CSS
英国网上购买门:Direct Doors
2018/06/07 全球购物
机电专业体育教师求职信
2013/09/21 职场文书
党员学习正风肃纪思想汇报
2014/09/12 职场文书
2014办公室副主任四风对照检查材料思想汇报
2014/09/20 职场文书
云南省召开党的群众路线教育实践活动总结会议新闻稿
2014/10/21 职场文书
期末考试复习计划
2015/01/19 职场文书
2015企业年终工作总结范文
2015/05/27 职场文书
美德少年主要事迹材料
2015/11/04 职场文书
Python之matplotlib绘制折线图
2022/04/13 Python
springboot集成redis存对象乱码的问题及解决
2022/06/16 Java/Android