EleResize

一个允许监听元素resize事件的解决方案

此脚本不应直接安装,它是一个供其他脚本使用的外部库。如果您需要使用该库,请在脚本元属性加入:// @require https://update.gf.qytechs.cn/scripts/450831/1090316/EleResize.js

  1. /**
  2. * Created by taozh on 2017/5/6.
  3. * taozh1982@gmail.com
  4. */
  5. var EleResize = {
  6. _handleResize: function (e) {
  7. var ele = e.target || e.srcElement;
  8. var trigger = ele.__resizeTrigger__;
  9. if (trigger) {
  10. var handlers = trigger.__z_resizeListeners;
  11. if (handlers) {
  12. var size = handlers.length;
  13. for (var i = 0; i < size; i++) {
  14. var h = handlers[i];
  15. var handler = h.handler;
  16. var context = h.context;
  17. handler.apply(context, [e]);
  18. }
  19. }
  20. }
  21. },
  22. _removeHandler: function (ele, handler, context) {
  23. var handlers = ele.__z_resizeListeners;
  24. if (handlers) {
  25. var size = handlers.length;
  26. for (var i = 0; i < size; i++) {
  27. var h = handlers[i];
  28. if (h.handler === handler && h.context === context) {
  29. handlers.splice(i, 1);
  30. return;
  31. }
  32. }
  33. }
  34. },
  35. _createResizeTrigger: function (ele) {
  36. var obj = document.createElement('object');
  37. obj.setAttribute('style',
  38. 'display: block; position: absolute; top: 0; left: 0; height: 100%; width: 100%; overflow: hidden;opacity: 0; pointer-events: none; z-index: -1;');
  39. obj.onload = EleResize._handleObjectLoad;
  40. obj.type = 'text/html';
  41. ele.appendChild(obj);
  42. obj.data = 'about:blank';
  43. return obj;
  44. },
  45. _handleObjectLoad: function (evt) {
  46. this.contentDocument.defaultView.__resizeTrigger__ = this.__resizeElement__;
  47. this.contentDocument.defaultView.addEventListener('resize', EleResize._handleResize);
  48. }
  49. };
  50. if (document.attachEvent) {//ie9-10
  51. EleResize.on = function (ele, handler, context) {
  52. var handlers = ele.__z_resizeListeners;
  53. if (!handlers) {
  54. handlers = [];
  55. ele.__z_resizeListeners = handlers;
  56. ele.__resizeTrigger__ = ele;
  57. ele.attachEvent('onresize', EleResize._handleResize);
  58. }
  59. handlers.push({
  60. handler: handler,
  61. context: context
  62. });
  63. };
  64. EleResize.off = function (ele, handler, context) {
  65. var handlers = ele.__z_resizeListeners;
  66. if (handlers) {
  67. EleResize._removeHandler(ele, handler, context);
  68. if (handlers.length === 0) {
  69. ele.detachEvent('onresize', EleResize._handleResize);
  70. delete ele.__z_resizeListeners;
  71. }
  72. }
  73. }
  74. } else {
  75. EleResize.on = function (ele, handler, context) {
  76. var handlers = ele.__z_resizeListeners;
  77. if (!handlers) {
  78. handlers = [];
  79. ele.__z_resizeListeners = handlers;
  80.  
  81. if (getComputedStyle(ele, null).position === 'static') {
  82. ele.style.position = 'relative';
  83. }
  84. var obj = EleResize._createResizeTrigger(ele);
  85. ele.__resizeTrigger__ = obj;
  86. obj.__resizeElement__ = ele;
  87. }
  88. handlers.push({
  89. handler: handler,
  90. context: context
  91. });
  92. };
  93. EleResize.off = function (ele, handler, context) {
  94. var handlers = ele.__z_resizeListeners;
  95. if (handlers) {
  96. EleResize._removeHandler(ele, handler, context);
  97. if (handlers.length === 0) {
  98. var trigger = ele.__resizeTrigger__;
  99. if (trigger) {
  100. trigger.contentDocument.defaultView.removeEventListener('resize', EleResize._handleResize);
  101. ele.removeChild(trigger);
  102. delete ele.__resizeTrigger__;
  103. }
  104. delete ele.__z_resizeListeners;
  105. }
  106. }
  107. }
  108. }

QingJ © 2025

镜像随时可能失效,请加Q群300939539或关注我们的公众号极客氢云获取最新地址