HTML

Question

我有一个使用-moz-resize CSS样式的元素。此样式可以使用鼠标调整元素大小。

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

Answer 1

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

只有窗口对象有onresize事件。

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

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

Answer 2

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

Detect if an element has been resized via javascript?

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

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

HTML

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

<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);

-moz-resize事件

2 个答案:

HTML

CSS

JavaScript代码/方法

用法