Как запретить выделение текста на JS

[GM`ka]

1. Выполнить preventDefault для событий onselectstart и onmousedown

var element = document.getElementById('content');
element.onselectstart = function () { return false; }
element.onmousedown = function () { return false; }

2. Добавить атрибут unselectable

$(document.body).attr('unselectable', 'on')

3. Добавить стиль user-select: none

.g-unselectable {
  -moz-user-select: none;
  -khtml-user-select: none;
  -webkit-user-select: none;
  user-select: none;
}

Есть и безумные решения данной проблемы:
4. По таймеру чистить Range, TextRange, Selection
5. Рендерить текст на канвасе
6. Использовать disabled textarea

<textarea disabled="disabled" style="border:none;color:#000;background:#fff; font-family:Arial;">
    Как запретить выделение текста на JS?
</textarea>

Вот микроплагин для jQuery, использующий методы 1-3

$.fn.disableSelection = function() {
    function preventDefault () {
        return false;
    }
    $(this).attr('unselectable', 'on')
           .css('-moz-user-select', 'none')
           .css('-khtml-user-select', 'none')
           .css('-o-user-select', 'none')
           .css('-msie-user-select', 'none')
           .css('-webkit-user-select', 'none')
           .css('user-select', 'none')
           .mousedown(preventDefault);
           .each(function() {
               this.onselectstart = preventDefault;
           });
};

Этот плагин не спасет от Ctrl+A Ctrl+C в тех браузерах, которые не поддерживают user-select или unselectable. А вообще запрещать выделение — зло.

Как узнать в какую сторону юзер крутит колесо мыши?
Есть 2 события, реагирующие на скролл колесом 'DOMMouseScroll' (Firefox) и 'mousewheel' (остальные)
Обработчик:

function wheel(event){
    var delta = 0;
    if (!event) event = window.event; // Событие IE.
    // Установим кроссбраузерную delta
    if (event.wheelDelta) {
        // IE, Opera, safari, chrome - кратность дельта равна 120
        delta = event.wheelDelta/120;
    } else if (event.detail) {
        // Mozilla, кратность дельта равна 3
        delta = -event.detail/3;
    }
    if (delta) {
        // Отменим текущее событие - событие поумолчанию (скролинг окна).
        if (event.preventDefault) {
            event.preventDefault();
        }
        event.returnValue = false; // для IE
       
        // если дельта больше 0, то колесо крутят вверх, иначе вниз
        var dir = delta > 0 ? 'Up' : 'Down',
    }
}

Не все элементы могут порождать скролл-событие. Зависит от конкретного браузера.

Как определить какая кнопка мыши нажата на JS?
Событие mousedown mouseup вызывают все кнопки мыши, click — только левая. В обработчике события необходимо проверить код кнопки event.button, чтобы узнать какая была нажата:
(0 — Левая, 1 — Средняя, 2 — Правая). В ИЕ8- все не так, см. код:

var button = document.getElementById('button'),
              //  0       1         2
    buttonMap = ['Left', 'Middle', 'Right'],
    handler = function (event) {
        event = event || window.event;
        alert(buttonMap[event.button] + ' id: ' + event.button);
    };

if (button.addEventListener) {
     button.addEventListener('mousedown',  handler, false);     
} else {
     // IE         0      1       2        3      4
     buttonMap = ['???', 'Left', 'Right', '???', 'Middle'];
     button.attachEvent('onmousedown',  handler);
}

jQuery чинит этот недостаток ИЕ, в нем стоит проверять event.which вместо магии с event.button

$('button').mousedown(function (event) {
    alert(['Left', 'Middle', 'Right'][event.which]);
});

Пример: jsfiddle.net/azproduction/W2XgH/

Как при помощи window.open() открыть именно новое окно, а не вкладку?
Это поведение зависит от конкретного браузера. Опера всегда открывает вкладку (но она представляется в виде окна), Сафари всегда открывают окно (поведение Сафари можно обойти). Хром, ФФ и ИЕ управляемы.

Если передать дополнительные параметры — позицию окна, то откроется новое окно:

window.open('http://www.google.com', '_blank', 'toolbar=0,location=0,menubar=0');

Если ничего не передать, то откроется таб:

window.open('http://www.google.com');

Чаще требуется отрыть новый таб, тут может быть проблема с сафари: по умолчанию (зависит от настроек) сафари при любом вызове функции window.open открывает новое окно. Но при клике на ссылку с нажатыми Ctrl+Shift/Meta+Shift всегда открывает новый таб (независимо от настроек). Для открытия нового таба будем эмулировать событие «click» с нажатыми Ctrl+Shift/Meta+Shift:

function safariOpenWindowInNewTab(href) {
    var event = document.createEvent('MouseEvents'),
        mac = (navigator.userAgent.indexOf('Macintosh') >= 0);

    // выполняем Ctrl+Shift+LeftClick/Meta+Shift+LeftClick (фокус)
    // создаем собственное событие
    event.initMouseEvent(
        /* type */          "click",
        /* canBubble */     true,
        /* cancelable */    true,
        /* view */          window,
        /* detail */        0,
        /* screenX, screenY, clientX, clientY */ 0, 0, 0, 0,
        /* ctrlKey */       !mac,
        /* altKey */        false,
        /* shiftKey */      true,
        /* metaKey */       mac,
        /* button */        0,
        /* relatedTarget */ null
    );

    // создаем ссылку в памяти и кликеам этм событием по ссылке - откроется новый таб
    $('<a/>', {'href': href, 'target': '_blank'})[0].dispatchEvent(event);
}

Как выполнить XHR без jQuery?

Не кросс-браузерная функция:

function xhr(m,u,c,x){with(new XMLHttpRequest)onreadystatechange=function(x){readyState^4||c(x.target)},open(m,u),send(с)}

Кросс-браузерная, немного длиннее:

function xhr(m,u,c,x){with(new(this.XMLHttpRequest||ActiveXObject)("Microsoft.XMLHTTP"))onreadystatechange=function(x){readyState^4||c(x)},open(m,u),send(с)}

Использование:

xhr('get', '//ya.ru/favicon.ico', function(xhr){console.dir(xhr)});

Получение произвольного значения массива :

var items = [12,548,'a',2,5478,'foo',8852,'Doe',2145,119];
var randomItem = items[Math.floor(Math.random() * items.length)];

Получение произвольного числа в определенном диапазоне :
Данный пример может использован, когда необходимо сгенерировать какие-либо фейковые данные, чтобы протестировать что-нибудь, к примеру, зарплаты, находящиеся между минимальными и максимальным значением:
Код:
var x = Math.floor(Math.random() * (max - min + 1)) + min;
Генерация численного массива от 0 до max:

var numbersArray = [] , max = 100;
// numbers = [0,1,2,3 ... 100]
for( var i=1; numbersArray.push(i++) < max;);

Генерация произвольного набора символов:

Код:
function generateRandomAlphaNum(len) {
  var rdmString = "";
  for( ; rdmString.length < len; rdmString  += Math.random().toString(36).substr(2));
  return  rdmString.substr(0, len);
}