1

我有一个使用-moz-resizeCSS 样式的元素。此样式允许使用鼠标调整元素的大小。

调整元素大小时是否会触发任何事件？

4

2 回答 2

1

https://developer.mozilla.org/en/DOM/element.onresize

只有 window 对象有 onresize 事件。

想法：你可以给项目一些 onClick / onmouseup 事件，它存储和检查本地元素的宽度/高度。所以你可以触发/触发其他一些事件/功能

http://www.w3schools.com/jsref/dom_obj_event.asp

于 2012-05-04T15:13:16.123 回答
0

我最近发布了一个要求相同解决方案的问题的答案：

检测元素是否已通过javascript调整大小？

要针对您的情况使用下面的方法，只需传入您想要侦听调整大小事件的元素以及您想要在它发生时调用的函数。元素是否具有 CSS resize 属性并不重要，这适用于任何 DOM 元素。一个警告：元素必须能够包含子元素，否则您需要包装有问题的元素 - 例如输入或 img - 并在其上设置侦听器。

警告：这是一个 SO 答案的很多内容，您可以阅读我博客上的完整帖子：http ://www.backalleycoder.com/2013/03/18/cross-browser-event-based-element-resize -检测/

HTML

以下 HTML 块会自动附加到您附加调整大小事件的任何元素。您只能将调整大小事件附加到允许子元素的元素 - 基本上，没有使用自闭合标签声明的元素。

<div class="resize-sensor">
    <div class="resize-overflow"><div></div></div>
    <div class="resize-underflow"><div></div></div>
</div>

CSS

.resize-sensor, .resize-sensor > div {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    z-index: -1;
}

JavaScript 代码/方法

以下是启用调整大小事件侦听所需的 JavaScript。前两个函数是在主要 addResizeListener 和 removeResizeListener 方法中使用的先决条件。（如前所述，有关 addFlowListener 方法的更多详细信息，请参见上溢/下溢事件帖子）

function addFlowListener(element, type, fn){
    var flow = type == 'over';
    element.addEventListener('OverflowEvent' in window ? 'overflowchanged' : type + 'flow', function(e){
        if (e.type == (type + 'flow') ||
        ((e.orient == 0 && e.horizontalOverflow == flow) ||
        (e.orient == 1 && e.verticalOverflow == flow) ||
        (e.orient == 2 && e.horizontalOverflow == flow && e.verticalOverflow == flow))) {
            e.flow = type;
            return fn.call(this, e);
        }
    }, false);
};

function fireEvent(element, type, data, options){
    var options = options || {},
        event = document.createEvent('Event');
    event.initEvent(type, 'bubbles' in options ? options.bubbles : true, 'cancelable' in options ? options.cancelable : true);
    for (var z in data) event[z] = data[z];
    element.dispatchEvent(event);
};

function addResizeListener(element, fn){
    var resize = 'onresize' in element;
    if (!resize && !element._resizeSensor) {
        var sensor = element._resizeSensor = document.createElement('div');
            sensor.className = 'resize-sensor';
            sensor.innerHTML = '<div class="resize-overflow"><div></div></div><div class="resize-underflow"><div></div></div>';

        var x = 0, y = 0,
            first = sensor.firstElementChild.firstChild,
            last = sensor.lastElementChild.firstChild,
            matchFlow = function(event){
                var change = false,
                width = element.offsetWidth;
                if (x != width) {
                    first.style.width = width - 1 + 'px';      
                    last.style.width = width + 1 + 'px';
                    change = true;
                    x = width;
                }
                var height = element.offsetHeight;
                if (y != height) {
                    first.style.height = height - 1 + 'px';
                    last.style.height = height + 1 + 'px';      
                    change = true;
                    y = height;
                }
                if (change && event.currentTarget != element) fireEvent(element, 'resize');
            };

        if (getComputedStyle(element).position == 'static'){
            element.style.position = 'relative';
            element._resizeSensor._resetPosition = true;
        }
        addFlowListener(sensor, 'over', matchFlow);
        addFlowListener(sensor, 'under', matchFlow);
        addFlowListener(sensor.firstElementChild, 'over', matchFlow);
        addFlowListener(sensor.lastElementChild, 'under', matchFlow);  
        element.appendChild(sensor);
        matchFlow({});
    }
        var events = element._flowEvents || (element._flowEvents = []);
        if (events.indexOf(fn) == -1) events.push(fn);
        if (!resize) element.addEventListener('resize', fn, false);
        element.onresize = function(e){
            events.forEach(function(fn){
                fn.call(element, e);
            });
        };
};

function removeResizeListener(element, fn){
    var index = element._flowEvents.indexOf(fn);
    if (index > -1) element._flowEvents.splice(index, 1);
    if (!element._flowEvents.length) {
        var sensor = element._resizeSensor;
        if (sensor) {
            element.removeChild(sensor);
            if (sensor._resetPosition) element.style.position = 'static';
            delete element._resizeSensor;
        }
        if ('onresize' in element) element.onresize = null;
        delete element._flowEvents;
    }
    element.removeEventListener('resize', fn);
};

用法

这是此解决方案的伪代码用法：

var myElement = document.getElementById('my_element'),
    myResizeFn = function(){
        /* do something on resize */
    };
addResizeListener(myElement, myResizeFn);
removeResizeListener(myElement, myResizeFn);
于 2013-03-22T00:07:01.970 回答