Switching the focus of windows event

[erkin]

Hello!
I can somehow track the event by switching the focus of windows on the title?

[stworthy]

Try the 'click' event on the window header.

Code:

$('#w').window('header').click(function(){
	console.log('click')
})

[erkin]

Thank you!

[erkin]

It works.
However, in fact the windows are switched over to mousedown event, not to click.
But the mousedown event does not work in panel title element (<div class="panel-title panel-with-icon">), only in panel header container (<div class="panel-header panel-header-noborder window-header">).

I get this event only at the edges of header container. And the click event does not always work
by windows switching...

[stworthy]

Please try this code instead.

Code:

$('#w').window('header').find('.panel-title').mousedown(function(){
	console.log('mousedown')
});

[erkin]

Unfortunately, this does not work.
My code is:

Code:

function onHeaderMouseDown () {
}
$el.dialog('header').find('.panel-title').on('mousedown', onHeaderMouseDown);

In the debugger, permanent errors:

Code:

Uncaught TypeError: Cannot read property 'target' of undefined
    at _43 (jquery.easyui-1.5.1.min.js:444)
    at jquery.easyui-1.5.1.min.js:638

And

Code:

Uncaught TypeError: Cannot read property 'show' of undefined
    at _295 (jquery.easyui-1.5.1.min.js:3701)
    at HTMLDivElement.onDrag (jquery.easyui-1.5.1.min.js:3664)
    at HTMLDocument._49 (jquery.easyui-1.5.1.min.js:484)
    at HTMLDocument.dispatch (jquery.min.js:3)
    at HTMLDocument.q.handle (jquery.min.js:3)

Without a handler, everything works correctly.

I use jQuery EasyUI 1.5.1, jQuery v3.1.0.

[stworthy]

This is the extended 'onActivate' event that is triggered when clicking on the window header.

Code:

<script type="text/javascript">
(function($){
	function fix(target){
		var state = $(target).data('window');
		var opts = state.options;
		$(target).window('window').draggable('options').onBeforeDrag = function(e){
			if (state.mask) state.mask.css('z-index', $.fn.window.defaults.zIndex++);
			if (state.shadow) state.shadow.css('z-index', $.fn.window.defaults.zIndex++);
			state.window.css('z-index', $.fn.window.defaults.zIndex++);
			if (opts.onActivate){
				opts.onActivate.call(target);
			}
		}
	}

	var plugin = $.fn.window;
	$.fn.window = function(options, param){
		if (typeof options == 'string'){
			return plugin.call(this, options, param);
		} else {
			return this.each(function(){
				plugin.call($(this), options, param);
				fix(this);
			});
		}
	}
	$.fn.window.defaults = plugin.defaults;
	$.fn.window.methods = plugin.methods;
	$.fn.window.parseOptions = plugin.parseOptions;
	$.fn.window.getMaskSize = plugin.getMaskSize;
})(jQuery);

$(function(){
	$('#dlg').dialog({
		onActivate: function(){
			console.log('onActivate')
		}
	});
})
</script>

[erkin]

Thanks for the answer, it really works in most cases. 

However, here we use the method onBeforeDrag.
Dragging is not possible for all areas of the window title:
in attached files it is seen. Dragging works for the central area of header, not for corners
However, windows always switch over the entire header area.