ドラッグ可能なスライダーを作る。イベントリスナーのスライダー内の子要素にイベント伝播しないようにしたい。

Question

ドラッグ可能なスライダーを作っています。イベントリスナーのスライダー内の子要素にイベント伝播しないようにしたいです。
jQuery使えば簡単だと思いますが今回は勉強のためにjQueryを使っていないのでjQueryを使用しない回答をお待ちしております。
addEventListenerの第3引数にtrueを設定、関数内でstopPropagation()を呼んでますがイベントが子要素のimgやliで発生してしまっています。
これにより「x = e.offsetX || e.layerX;」の処理がうまくいかず#swipe内のクリック位置が取得できません。
CSS3のpointer-events:none;を子要素に適用すると一応動くのですがIE10以下で効きません。
できればCSSに頼らない方法が希望です。

コードはcodepenにあります。
http://codepen.io/merrymistake/pen/wMGOoz/

ご回答よろしくお願い致します。

Answer 1

これあげる

var target = document.getElementById("swipe");
		
target.addEventListener('mousedown', mouseDown);

function mouseDown(e){
	e.preventDefault();
	var elem = this;
	var positionX = e.clientX - this.offsetLeft;


	document.onmousemove = function(e){
		
		elem.style.left = e.clientX - positionX + 'px';
	}

	document.onmouseup = function(e){

		this.onmousemove = null;
		this.onmouseup   = null;
	}
}

Comments

[merry]

ありがとうございます。
シンプルで汎用性高くていいですね。
ベストアンサーにさせて頂きます。

とても勉強になりました。