Как я могу хранить отзывы пользователей, связанные с какой-либо частью веб-страницы?

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

Я могу думать о 2 решениях:

  1. Хранить координаты X,Y. Должен был исключить это, так как X,Y координаты не поддерживаются во всех браузерах.

  2. Используйте Jquery, чтобы связать исчерпывающий список html-сущностей с событием dblClick, например так:

    $(document).ready(function() {
$("p,label,input,textarea").bind("dblclick", function(e) {
    $("#feedback_form").show();
});

    });

Таким образом, в приведенном выше примере, когда любой p, label, input или textarea дважды щелкают, форма обратной связи будет отображаться (код для передачи идентификатора элемента, по которому дважды щелкнули, для моего примера не включен для простоты).

Таким образом, 2 не является идеальным, но, похоже, оно поможет при любом отзыве в списке поддерживаемых html-сущностей.

Есть ли какое-то более простое решение, которое я пропускаю?

Кроме того, если я выберу цифру 2, является ли двойной щелчок лучшим способом для использования этой формы обратной связи, или вы бы порекомендовали какое-то другое мероприятие?

Источник

6 ответов

Я бы порекомендовал не размещать на сайте ни одного комментария, а разрешить комментировать определенные элементы. Например, если это блог, вы можете использовать каждый абзац как элемент, который можно комментировать. Если это хранилище кода, то комментарии могут быть добавлены к отдельным строкам кода.

Посмотрите, как Книга Джанго комментирует абзацы.

Источник

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

это предполагает, что все ваши элементы DOM имеют уникальные идентификаторы

(и что ваши пользователи знают, что они могут сделать это!)

Источник

Я надеюсь, что большая часть вашего макета использует теги

и . Как предположил Стивен, имейте уникальные идентификаторы, связанные с каждым из ваших элементов блока или любых других элементов, которые являются неотъемлемой частью вашей веб-страницы (возможно, изображения).

Имейте событие onclick, связанное с элементом block/layout, чтобы открыть другое окно или всплывающее окно javascript, захватить id элемента и иметь форму во всплывающем окне, где пользователь может отправить свой отзыв.

Я бы также предложил onmouseover, даже связанный со всеми этими элементами, которые отображают всплывающую подсказку, указывающую, что пользователь может оставить отзыв об этом виджете / элементе макета.

Источник

Двойной щелчок плох, потому что в большинстве браузеров вы можете выбирать слова, дважды щелкая по ним.

Вместо этого должны быть специальные места на странице, где вы можете нажать, чтобы оставить отзыв. Смотрите советский ответ для хорошего примера.

Источник

Вы могли бы сделать что-то вроде этого:

Блоки, которые вы хотели бы прокомментировать, имеют класс "commentable" и имеют идентификатор.
Приведенный ниже сценарий представляет собой схему, которая работает для W3C-совместимых браузеров, т. Е. Потребуется использовать attachEvent и объект глобального события.
Распространение события не отменяется, поэтому комментируемые блоки внутри комментируемых блоков будут запускать событие один раз каждый.
Действие по умолчанию для этого события также не отменяется, поэтому текст, по которому дважды щелкнули мышью, все равно будет выделен - возможно, в вашем диалоговом окне может быть действие "кликнуть, чтобы отменить"?

function CommentDialog() {
    //this is a fake CommentDialog object constructor
    this.display = function( id ) {
        alert( 'you want to comment on the block with id: '+id+', which is outlined in red' );
    } 
}



window.addEventListener( 'dblclick', function(e){ 
    var target = e.target;
    while( /commentable/.test( target.className ) == false ) {
        // if we've hit the body tag then bomb out
        if( target == document.body ) {
            return;
        }
        target = target.parentNode;
    }
    target.style.border = '1px solid red';
    var cmt = new CommentDialog();
    cmt.display( target.id );
 }, false );
Источник

Мне нравится второе решение, но я бы прикрепил функцию не к некоторым html-сущностям, а к четко определенному div-файлу, например:

$(document).ready(function() {
    $("div .commentable").each().bind("dblclick", function(e) {
        $("#feedback_form").show();
});
});

Так что вам просто нужно обернуть все элементы, которые вы хотите комментировать в <div class="commentable"> .. </div>

С первым решением, если вы хотите получить обратную связь в любом месте вашей страницы, а не только с указанными элементами, JQuery может помочь вам

jQuery(document).ready(function(){
   $().click(function(e){
      alert(e.pageX +', '+ e.pageY);
   }); 
})

Смотрите документ JQuery для получения дополнительной информации.

Источник
Другие вопросы по тегам