Запретить событие onClick при выборе текста

У меня есть эта проблема, когда мне нужно показывать и скрывать divs при нажатии на ячейку таблицы. Тем не менее, я также хочу, чтобы люди могли выбирать текст и копировать его внутри ячейки, не скрывая информацию.

Полностью открыт для изменения дизайна, если это необходимо. :)

Вот скрипка, которая демонстрирует проблему

http://jsfiddle.net/k61u66ek/1/

Вот код HTML в скрипте:

<table border=1>
    <tr>
        <td>
            Information
        </td>
        <td onClick="toggleInfo()">
            <div id="information" style="display:none">
                More information that I want to select without hiding
            </div>
            <div id="clicktoshow">
                Click to show info
            </div>

        </td>
    </tr>
</table>

Вот javascript:

function toggleInfo() {
    $("#clicktoshow").toggle();
    $("#information").toggle();    
}

Любое предложение / совет очень ценится!

/ Patrik

javascript,jquery,html,show-hide,

11

Ответов: 4

20 принят

Одним из вариантов является для проверки typeна window.getSelectionобъект , возвращаемый :function toggleInfo() { var selection = window.getSelection(); if(selection.type != "Range") { $("#clicktoshow").toggle(); $("#information").toggle(); } }

type

http://jsfiddle.net/k61u66ek/4/

Обновить

Если браузер, на который настроен таргетинг, не предоставляет typeсвойство Selectionобъекта, вы можете протестировать его по длине выбранного значения:

function toggleInfo() {
    var selection = window.getSelection();
    if(selection.toString().length === 0) {
        $("#clicktoshow").toggle();
        $("#information").toggle();
    }
}

http://jsfiddle.net/k61u66ek/9/

который, в свою очередь, может быть уменьшен до проверки bool toString:

if(!selection.toString()) {

http://jsfiddle.net/k61u66ek/10/

2

Вы можете проверить, есть ли выбор в обработчике событий click:

window.getSelection().toString();
1

Вы можете использовать mouseup, mousedownи mousemoveсобытие , для достижения этой цели:

DEMO

var isDragging = false;
$("#clickshow")
.mousedown(function() {
    isDragging = false;
})
.mousemove(function() {
    isDragging = true;
 })
.mouseup(function() {
    var wasDragging = isDragging;
    isDragging = false;
    if (!wasDragging) {
        $("#information").toggle();
        $("#clicktoshow").toggle();
    }
});

ИСТОЧНИК

1

Вы можете проверить, переключен ли «информационный» div:

function toggleInfo() {
    if(document.getElementById('information').style.display == 'none'){
         $("#clicktoshow").toggle();
         $("#information").toggle();
   } else { 
       // do nothing
   }
}

Проверьте этот скрипт

JavaScript, JQuery, HTML, показать скрыть,
Похожие вопросы
Яндекс.Метрика