Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 03.08.2010, 20:09
Аватар для Cuprum
Аспирант
Отправить личное сообщение для Cuprum Посмотреть профиль Найти все сообщения от Cuprum
 
Регистрация: 10.01.2010
Сообщений: 33

Обработчик события действует только на ссылки?
Есть незамысловатый код ((document).ready подразумевается):
var textSelection = ''; 
function getSel() { //функция пишет в переменную выделение мышкой
	if (textSelection = window.getSelection)	// !IE
		textSelection = window.getSelection().toString();
	else	// IE
		textSelection = document.selection.createRange().text;
	return textSelection;
}
$('body').mouseup(function(){
		getSel();		
});
$('#link').click(function () {
		alert (textSelection);
});

Проблема вот в чем: почему то обработчик работает как-то не так (а может я чего-то не знаю ). Если элемент это ссылка с id="link", то все в порядке, в модальном окне виден выделенный текст. Но если элемент не является ссылкой (например <div id="link">, <span id="link"> и т.д.) то появляется просто пустое модальное окно.
Вопросы просты: как заставить обрабочик выводить выделенный фрагмент по клику на блоке (нужно именно это) и где ошибка в приведенном коде?
Ответить с цитированием
  #2 (permalink)  
Старый 04.08.2010, 22:06
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,085

1.
if (textSelection = window.getSelection)
должна быть
if (window.getSelection)

2. так как click состоит из mousedown, mouseup $('#link').click стирает предыдущее выделение, если выделение было на другом элементе кроме #link'
надо менять логику скрипта или как вариант сделать так:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>
  <title></title>
</head>

<body><div id="link">Выдели текст и кликни тут!!!</div><div id="link0">всякий разный текст</div><div id="link1">всякий разный текст</div><div id="link2">всякий разный текст</div>

<script language="JavaScript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>
<script language="JavaScript" type="text/javascript">
var textSelection = '';

function getSel() { //функция пишет в переменную выделение мышкой

    if (window.getSelection) // !IE
    textSelection = window.getSelection().toString();
    else // IE
    textSelection = document.selection.createRange().text;
    return textSelection;
}
$('body').mouseup(function () {
    getSel();
});
$('#link').mouseup(function () {
    if (textSelection) alert(textSelection);
});
</script>
</body>

</html>
Ответить с цитированием
  #3 (permalink)  
Старый 04.08.2010, 22:59
Аватар для Cuprum
Аспирант
Отправить личное сообщение для Cuprum Посмотреть профиль Найти все сообщения от Cuprum
 
Регистрация: 10.01.2010
Сообщений: 33

Спасибо за код и инфу, по поводу затирания не знал. А если как-то в моем выражении
$('body').mouseup(function(){
	        getSel();      
});

докапаться до того элемента где непосредственно происходит событие и работать уже с ним? Это спасет? Те "слушать" весь body, но при отпускании мыши работать с тем элементом, над которым произошел mouseup.

Последний раз редактировалось Cuprum, 04.08.2010 в 23:11.
Ответить с цитированием
  #4 (permalink)  
Старый 04.08.2010, 23:57
Отправить личное сообщение для Octane Посмотреть профиль Найти все сообщения от Octane  
Регистрация: 10.07.2008
Сообщений: 3,873

Сообщение от рони
1.
if (textSelection = window.getSelection)

должна быть
if (window.getSelection)
Здесь нет ошибки.


Я бы сделал как-то так:
$Selection = {
	standardsCompliant: typeof getSelection != "undefined",
	get: function () {
		return this.standardsCompliant ? getSelection() : document.selection;
	},
	getRange: function () {
		return this.get()[this.standardsCompliant ? "getRangeAt" : "createRange"](0);
	}
};

$Range = {
	standardsCompliant: $Selection.standardsCompliant,
	stringify: function (range) {
		return this.standardsCompliant ? range.toString() : range.text;
	}
};

var text;

$("body").mouseup(function () {
	text = $Range.stringify($Selection.getRange());
});

$("#link").click(function () {
	alert(text);
});
Ответить с цитированием
  #5 (permalink)  
Старый 05.08.2010, 00:34
Аватар для Cuprum
Аспирант
Отправить личное сообщение для Cuprum Посмотреть профиль Найти все сообщения от Cuprum
 
Регистрация: 10.01.2010
Сообщений: 33

Octane,
Цитата:
Здесь нет ошибки
Зато чуть покороче,

А в чем преимущество вашего способа определения выделения (сложновато будет) перед функцией?
ЗЫ. $Selection - это объект, не так ли?
Ответить с цитированием
  #6 (permalink)  
Старый 05.08.2010, 00:38
Аватар для x-yuri
Отправить личное сообщение для x-yuri Посмотреть профиль Найти все сообщения от x-yuri
 
Регистрация: 27.12.2008
Сообщений: 4,201

ну если продолжать, то я бы избавился от глобальной переменной и подготовил пути к развитию
Function.prototype.bind = function(scope) {
    var that = this, args = [].slice.call(arguments, 1);
    return function() {
        return that.apply(scope || this, args.concat([].slice.call(arguments, 0)));
    };
};

function QuoteLink( el ){
    this._el = $(el);
    $("body").mouseup( this._onMouseUp_body.bind(this) );
    this._el.click( this._onClick.bind(this) );
}

QuoteLink.prototype._onMouseUp_body = function(){
    this._text = $Range.stringify($Selection.getRange());
}

QuoteLink.prototype._onClick = function(){
    alert(this._text);
}

Последний раз редактировалось x-yuri, 05.08.2010 в 04:22.
Ответить с цитированием
  #7 (permalink)  
Старый 05.08.2010, 00:39
Аватар для x-yuri
Отправить личное сообщение для x-yuri Посмотреть профиль Найти все сообщения от x-yuri
 
Регистрация: 27.12.2008
Сообщений: 4,201

Сообщение от Cuprum
Зато чуть покороче,
и что, что короче?
Ответить с цитированием
  #8 (permalink)  
Старый 05.08.2010, 00:50
Аватар для Cuprum
Аспирант
Отправить личное сообщение для Cuprum Посмотреть профиль Найти все сообщения от Cuprum
 
Регистрация: 10.01.2010
Сообщений: 33

Сообщение от x-yuri Посмотреть сообщение
и что, что короче?
Если можно сделать проще и это работает, зачем городить огород? (В принципе, не только применительно к коду.)
Ответить с цитированием
  #9 (permalink)  
Старый 05.08.2010, 01:08
Отправить личное сообщение для Octane Посмотреть профиль Найти все сообщения от Octane  
Регистрация: 10.07.2008
Сообщений: 3,873

Ой самое главное забыл дописать. Чтобы ваш вариант работал, нужно preventDefault выполнить по mousedown на #link.
<!DOCTYPE html>
<meta charset="utf-8">
<div>
	<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
	<span id="test">test</span>
</div>
<script>
$Selection = {
	standardsCompliant: typeof getSelection != "undefined",
	get: function () {
		return this.standardsCompliant ? getSelection() : document.selection;
	},
	getRange: function () {
		return this.get()[this.standardsCompliant ? "getRangeAt" : "createRange"](0);
	}
};

$Range = {
	standardsCompliant: $Selection.standardsCompliant,
	stringify: function (range) {
		return this.standardsCompliant ? range.toString() : range.text;
	}
};

//~~~~~~~~~~~~~~~~~~~~~~~

var text;

document.body.onmouseup = function () {
	text = $Range.stringify($Selection.getRange());
};

var btn = document.getElementById("test");

btn.onmousedown = function (event) {
	if (event && event.preventDefault) {
		event.preventDefault();
	} else {
		event.returnValue = false;
	}
};

btn.onclick = function () {
	alert(text);
};
</script>


Сообщение от Cuprum
ЗЫ. $Selection - это объект, не так ли?
Да обычный объект.

Сообщение от Cuprum
А в чем преимущество вашего способа определения выделения (сложновато будет) перед функцией?
Ничего в этом коде сложного нет. Преимущество в том, что кросс-браузерная работа с Selection/Range/TextRange вынесена из тела функции и эти методы можно будет использовать где-то еще. В таком коде легче разобраться.

Короче не всегда лучше.

Последний раз редактировалось Octane, 05.08.2010 в 01:11.
Ответить с цитированием
  #10 (permalink)  
Старый 05.08.2010, 01:16
Аватар для x-yuri
Отправить личное сообщение для x-yuri Посмотреть профиль Найти все сообщения от x-yuri
 
Регистрация: 27.12.2008
Сообщений: 4,201

проще понятие неоднозначное и уж точно не то же самое, что и "меньше строк". Меньше строк получилось? Отлично. А строки от этого проще стали? Пихать все в одну строку - усложнение кода (понимания кода). В частности, использование выражений с побочными эффектами. Разве не проще рассчитывать, что все выражения будут без побочных эффектов? Для меня же проще в первую очередь, когда я вижу что происходит, а не как это реализовано (это в целом про "что такое просто для меня"). Да и Эйнштейн, ведь, говорил про "настолько просто, насколько это возможно", а не про "максимально просто"

Вариант Octane - это выделение библиотечного кода, который будет повторно использоваться. Мой вариант - выделение компонентов, которые тоже будут повторно использоваться. Для кода в первом сообщении это, в общем-то, не актуально, но ведь это не окончательный вариант?

Последний раз редактировалось x-yuri, 05.08.2010 в 01:19.
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Как "обмануть" обработчик события? itPiligrim Events/DOM/Window 0 13.05.2010 22:55
ссылки получали стиль "visited" только на время сессии alexandr_poskrobka Серверные языки и технологии 7 10.03.2010 08:48
как узнать имеется ли обработчик события HelpeR Events/DOM/Window 9 17.02.2010 18:20
Обработчик события: как делает jquery? Shasoft jQuery 35 22.04.2009 09:41
отправка файла через обработчик события submit starrich AJAX и COMET 2 13.08.2008 22:29