Форум

Nafaya · #1 (**permalink**) 29.05.2011, 10:26

Ребят помогите, в Google Chrome и в FireFox работает нормально, а в IE и Opera вообще никак.

<html>
	<head>
		<title>111</title>
		<script language="javascript" src="library.js"></script>
		<script language="javascript">
			<!--
				zindex=0 ;
				function fixEvent(event) {
					event = event || window.event
					if ( event.isFixed ) {
					  return event
					}
					event.isFixed = true
					event.preventDefault = event.preventDefault || function(){this.returnValue = false}
					event.stopPropagation = event.stopPropagaton || function(){this.cancelBubble = true}
					if (!event.target) {
						event.target = event.srcElement
					}
					if (!event.relatedTarget && event.fromElement) {
						event.relatedTarget = event.fromElement == event.target ? event.toElement : event.fromElement;
					}
					if ( event.pageX == null && event.clientX != null ) {
						var html = document.documentElement, body = document.body;
						event.pageX = event.clientX + (html && html.scrollLeft || body && body.scrollLeft || 0) - (html.clientLeft || 0);
						event.pageY = event.clientY + (html && html.scrollTop || body && body.scrollTop || 0) - (html.clientTop || 0);
					}
					if ( !event.which && event.button ) {
						event.which = (event.button & 1 ? 1 : ( event.button & 2 ? 3 : ( event.button & 4 ? 2 : 0 ) ));
					}
					return event
				}
				function ffunc(event) {
					zindex++
					event = fixEvent(event)
					var div_element = document.createElement('table') ;
					div_element.style.zIndex = zindex ;
					div_element.style.marginTop = event.pageY ;
					div_element.style.marginLeft = event.pageX ;
					div_element.style.position = "fixed" ;
					div_element.style.backgroundColor = 'green' ;
					div_element.style.borderSpacing = 1 ;
					div_element.innerHTML = '<tr><td style="background-color: yellow ; margin: 0 ; padding: 0 ;" width=2 height=2></td></tr>' ;
					document.body.appendChild(div_element)
				}
			-->
		</script>
	</head>
	<body id="body" style="padding: 0 ; margin: 0 ;" onmousemove="ffunc(event)"></body>
</html>

trikadin · #2 (**permalink**) 30.05.2011, 00:51

<html>
    <head>
        <title>111</title>
        <script type="text/javascript">
		 function fixEvent(event) {
                    event = event || window.event
                    if ( event.isFixed ) {
                      return event
                    }
                    event.isFixed = true
                    event.preventDefault = event.preventDefault || function(){this.returnValue = false}
                    event.stopPropagation = event.stopPropagaton || function(){this.cancelBubble = true}
                    if (!event.target) {
                        event.target = event.srcElement
                    }
                    if (!event.relatedTarget && event.fromElement) {
                        event.relatedTarget = event.fromElement == event.target ? event.toElement : event.fromElement;
                    }
                    if ( event.pageX == null && event.clientX != null ) {
                        var html = document.documentElement, body = document.body;
                        event.pageX = event.clientX + (html && html.scrollLeft || body && body.scrollLeft || 0) - (html.clientLeft || 0);
                        event.pageY = event.clientY + (html && html.scrollTop || body && body.scrollTop || 0) - (html.clientTop || 0);
                    }
                    if ( !event.which && event.button ) {
                        event.which = (event.button & 1 ? 1 : ( event.button & 2 ? 3 : ( event.button & 4 ? 2 : 0 ) ));
                    }
                    return event
                }
		ffunc = function(event) {
			event= fixEvent(event);
			var div=document.createElement("div");
			div.style.position= "absolute";
			div.style.left= event.pageX//clientX;
			div.style.top= event.pageY//clientY;
			div.style.width=div.style.height="5px";
			div.style.overflow="hidden";
			div.style.background="yellow";
			document.getElementsByTagName("body")[0].appendChild(div);			
		}
        </script>
    </head>
    <body id="body" style="padding: 0 ; margin: 0 ;" onmousemove="ffunc(event)"></body>
</html>

У меня заработало только после того, как я переписал ffunc с нуля. Хз. Может, div_element - зарезервированное имя?

trikadin · #3 (**permalink**) 30.05.2011, 01:13

Вообще, код до хера сложный у вас был. Все общие стили выносим в отдельный класс.

z-index вам нахрен не сдался - по умолчанию элементы, следующие в коде ниже, находятся на странице выше предыдущих.

Я сделал бы примерно так:

<html>
    <head>
        <title>111</title>
		<style>
		html, body {
			height: 100%;
			width: 100%;
		}
		body {
			padding:0;
			margin: 0;
		}
		#place {
			display:block;
			width: 100%;
			height: 100%;
			overflow: hidden;
		}
		
		.pset {
			position: absolute;
			width: 4px;
			height: 4px;
			background: yellow;
			border: 1px solid green;
			overflow: hidden;
		}
		</style>
        
    </head>
    <body>
	<div id="place" onmousemove="ffunc(event)"></div>
	<script type="text/javascript">
		place=document.getElementById("place");
		function ffunc(event) {
			event= event || window.event;
			var div=document.createElement("div");
			div.style.position= "absolute";
			div.style.left= event.clientX;
			div.style.top= event.clientY;
			div.className="pset";
			place.appendChild(div);			
		}
        </script>
	</body>
</html>

Форум

Справочник

Discord чат

Курсы javascript