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 相关文章推荐
javascript 日期时间函数(经典+完善+实用)
May 27 Javascript
类似GMAIL的Ajax信息反馈显示
Feb 16 Javascript
JS实现的自定义网页拖动类
Nov 06 Javascript
如何使用jquery easyui创建标签组件
Nov 18 Javascript
jQuery遍历DOM元素与节点方法详解
Apr 14 Javascript
深究AngularJS——ng-checked(回写:带真实案例代码)
Jun 13 Javascript
React-Native使用Mobx实现购物车功能
Sep 14 Javascript
使用cropper.js裁剪头像的实例代码
Sep 29 Javascript
vue2.0 axios跨域并渲染的问题解决方法
Mar 08 Javascript
Element输入框带历史查询记录的实现示例
Jan 15 Javascript
微信小程序封装的HTTP请求示例【附升级版】
May 11 Javascript
用Angular实现一个扫雷的游戏示例
May 15 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
destoon整合UCenter图文教程
2014/06/21 PHP
PHP中new static()与new self()的区别异同分析
2014/08/22 PHP
在Windows系统下使用PHP生成Word文档的教程
2015/07/03 PHP
php 生成加密公钥加密私钥实例详解
2017/06/16 PHP
Laravel框架源码解析之模型Model原理与用法解析
2020/05/14 PHP
Prototype使用指南之selector.js说明
2008/10/26 Javascript
超简单JS二级、多级联动的简单实例
2014/02/18 Javascript
Javascript 学习笔记之 对象篇(二) : 原型对象
2014/06/24 Javascript
JavaScript中使用Math.floor()方法对数字取整
2015/06/15 Javascript
jquery无法为动态生成的元素添加点击事件的解决方法(推荐)
2016/12/26 Javascript
javascript正则表达式模糊匹配IP地址功能示例
2017/01/06 Javascript
bootstrap table表格使用方法详解
2017/04/26 Javascript
node.js中fs.stat与fs.fstat的区别详解
2017/06/01 Javascript
在 Node.js 中使用原生 ES 模块方法解析
2017/09/19 Javascript
Vue 2.5 Level E 发布了: 新功能特性一览
2017/10/24 Javascript
在AngularJs中设置请求头信息(headers)的方法及不同方法的比较
2018/09/04 Javascript
JavaScript中this的全面解析及常见实例
2019/05/14 Javascript
基于JavaScript实现留言板功能
2020/03/16 Javascript
js实现滑动进度条效果
2020/08/21 Javascript
用Python制作简单的朴素基数估计器的教程
2015/04/01 Python
Python 使用SMTP发送邮件的代码小结
2016/09/21 Python
详解python中executemany和序列的使用方法
2017/08/12 Python
Python实现的直接插入排序算法示例
2018/04/29 Python
解决Python3中的中文字符编码的问题
2018/07/18 Python
python itchat给指定联系人发消息的方法
2019/06/11 Python
用pycharm开发django项目示例代码
2019/06/13 Python
Python中关于浮点数的冷知识
2019/09/22 Python
python图形开发GUI库pyqt5的详细使用方法及各控件的属性与方法
2020/02/14 Python
python实现程序重启和系统重启方式
2020/04/16 Python
如何在Windows中安装多个python解释器
2020/06/16 Python
基于python实现图片转字符画代码实例
2020/09/04 Python
HTML5注册表单的自动聚焦与占位文本示例代码
2013/07/19 HTML / CSS
Book Depository欧盟:一家领先的国际图书零售商
2019/05/21 全球购物
2014年学习厉行节约反对浪费思想汇报
2014/09/10 职场文书
2017大学生寒假社会实践心得体会
2016/01/14 职场文书
Mysql InnoDB 的内存逻辑架构
2022/05/06 MySQL