javascript - -moz-resize イベント

Question

-moz-resizeCSS スタイルを使用している要素があります。このスタイルでは、マウスで要素のサイズを変更できます。

要素のサイズを変更しているときに発生するイベントはありますか?

Answer 1

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

window オブジェクトだけが onresize イベントを持っています。

アイデア: ローカル要素の幅/高さを保存およびチェックする onClick / onmouseup イベントを項目に与えることができます。したがって、他のイベント/機能をトリガー/起動できます

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

Answer 2

私は最近、同じ解決策を求めた質問に回答を投稿しました:

javascriptを介して要素のサイズが変更されたかどうかを検出しますか?

以下のメソッドをケースに使用するには、サイズ変更イベントをリッスンする要素と、イベントが発生したときに呼び出す関数を渡すだけです。要素に CSS resize プロパティがあるかどうかは関係ありません。これは、どの DOM 要素にも機能します。1 つの注意点: 要素には子を含めることができる必要があります。それ以外の場合は、問題の要素 (input や img など) をラップし、その上にリスナーを設定する必要があります。

警告: これは 1 つの 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 です。最初の 2 つの関数は、メインの 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);