Как выбрать элемент кроме его дочерних элементов?

Question

Как выбрать элемент кроме его дочерних элементов?

0

У меня есть простая таблица, которая выглядит так:

<table>
    <tbody>
        <tr>
            <td>
                <input type="text">
            </td>
            <td>
                <input type="text">
            </td>
            <td>
                <input type="text">
            </td>
            <td>
                <input type="text">
            </td>
            <td>
                <input type="text">
            </td>
        </tr>
        <tr>
            <td>
                <input type="text">
            </td>
            <td>
                <input type="text">
            </td>
            <td>
                <input type="text">
            </td>
            <td>
                <input type="text">
            </td>
            <td>
                <input type="text">
            </td>
        </tr>
        <tr>
            <td>
                <input type="text">
            </td>
            <td>
                <input type="text">
            </td>
            <td>
                <input type="text">
            </td>
            <td>
                <input type="text">
            </td>
            <td>
                <input type="text">
            </td>
        </tr>
        <tr>
            <td>
                <input type="text">
            </td>
            <td>
                <input type="text">
            </td>
            <td>
                <input type="text">
            </td>
            <td>
                <input type="text">
            </td>
            <td>
                <input type="text">
            </td>
        </tr>
        <tr class="error">
            <td>
                <input type="text">
            </td>
            <td>
                <input type="text">
            </td>
            <td>
                <input type="text">
            </td>
            <td>
                <input type="text">
            </td>
            <td>
                <input type="text">
            </td>
        </tr>
    </tbody>
</table>

Когда я нажимаю на tr мне нужно добавить к нему специальный класс, но только я нажимаю на tr, а не на input внутри него. Как это сделать?

Я попробовал что-то вроде этого:

table.find('tbody').on('click', 'tr:not(input)', function(){
        jQuery(this).toggleClass('error');
    });

user1692333 24 сен. 2013, в 00:58

Источник

Теги:

javascript

jquery

4 ответа

2

table.find('tbody').on('click', 'tr', function(e) {
    if (e.target != this)
        return;    

    $(this).toggleClass('error');
});

Roy Miloh 23 сен. 2013, в 19:32

0

Не фанат отрицательных условных if (e.target === this) $(this).toggleClass('error'); , я бы использовал if (e.target === this) $(this).toggleClass('error');
Mark Schultheiss 23 сен. 2013, в 22:28
0

Поправьте меня, если я ошибаюсь, не остановит ли это выполнение, если вы нажмете на элементы td вложенные в элементы tr ? Или, например, если был тег div span или p который вы нажимаете ...
Jasper 23 сен. 2013, в 22:54
0

@ Джаспер, это так.
Roy Miloh 23 сен. 2013, в 22:55
0

@RoyMiloh Это что? jsfiddle.net/tM59b
Jasper 23 сен. 2013, в 22:57
0

@ Джаспер Вы правы, но OP сказал, but only when i click on tr . Может быть, он упомянул td , поэтому он может легко перейти от tr к td , но это не главное. jsfiddle.net/tM59b/2
Roy Miloh 23 сен. 2013, в 23:03
0

e.target != this всегда будет истиной, если тд существует, а за тд нет места. - так ничто никогда не будет переключено.
Mark Schultheiss 23 сен. 2013, в 23:10

Показать ещё 4 комментария

1

Вы можете остановить событие от пузырьков до элемента tr, используя event.stopPropagation:

table.find("tr").on("click", function () {
    jQuery(this).toggleClass("error");
}).find("input").on("click", function (event) {
    event.stopPropagation();
});

Вот некоторая документация для ya, если вы хотите узнать больше: http://api.jquery.com/event.stopPropagation/

Здесь JSFiddle решения: http://jsfiddle.net/tM59b/1/

Jasper 23 сен. 2013, в 20:46

2

нашел лучшее решение, например, if (event.target.type != 'text')
user1692333 23 сен. 2013, в 22:10
0

Используйте if (event.target.tagName != "INPUT") для прямой проверки. Не уверен, есть ли другие элементы, которые имеют свойство type , равное text .
Anurag 23 сен. 2013, в 22:21
0

event.target.type не будет работать для других типов ввода, таких как радио, выбор и т. д. См. stackoverflow.com/questions/3165413/… для обсуждения типов ввода.
Mark Schultheiss 23 сен. 2013, в 22:30

Показать ещё 1 комментарий

0

Добавьте на input прослушиватель кликов и return false; от него, чтобы остановить событие от распространения до tr.

Вот так:

$('tr input').click(function(e){
    return false;
});

Robbie Wxyz 23 сен. 2013, в 20:34

Ещё вопросы

Не фанат отрицательных условных if (e.target === this) $(this).toggleClass('error'); , я бы использовал if (e.target === this) $(this).toggleClass('error');
Поправьте меня, если я ошибаюсь, не остановит ли это выполнение, если вы нажмете на элементы td вложенные в элементы tr ? Или, например, если был тег div span или p который вы нажимаете ...
@ Джаспер Вы правы, но OP сказал, but only when i click on tr . Может быть, он упомянул td , поэтому он может легко перейти от tr к td , но это не главное. jsfiddle.net/tM59b/2
e.target != this всегда будет истиной, если тд существует, а за тд нет места. - так ничто никогда не будет переключено.
нашел лучшее решение, например, if (event.target.type != 'text')
Используйте if (event.target.tagName != "INPUT") для прямой проверки. Не уверен, есть ли другие элементы, которые имеют свойство type , равное text .
event.target.type не будет работать для других типов ввода, таких как радио, выбор и т. д. См. stackoverflow.com/questions/3165413/… для обсуждения типов ввода.

Mark Schultheiss · Accepted Answer · 2013-09-23T21-10-00.000Z

Я думаю, что лучшее, что вы можете здесь сделать, это проверить имя узла, чтобы увидеть, является ли это td или tr - или включать другие теги, если вы хотите.

$('tbody').on('click', 'tr', function (e) {
    if (e.target.nodeName.toLowerCase() === "td" || e.target.nodeName.toLowerCase() === "tr") {
        $(this).toggleClass('error');
    }
});

Если вы специально хотите, чтобы входные данные были исключены, вы могли бы исключить их:

$('tbody').on('click', 'tr', function (e) {
    if (!$(e.target).is(':input')) {
        $(this).toggleClass('error');
    }
});